From f8542c6b7813b17dfe60b5b0550f2952535f0c1f Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 11 Aug 2017 09:58:33 -0700 Subject: [PATCH] [UI Framework] Reorganize UI Framework and add Yeoman generator (#13172) (#13477) * Reorganize documentation styles so they all live in doc_site/components directory. (#12809) - Remove global styles, e.g. body and html element selectors. * Create global_styles dir with sub-directories. (#12833) * Add SCSS style guide. (#12850) * Refactor UI Framework directory structure to house everything in a src directory. (#12880) - Add components/index.js and services/index.js files to continue to export JS modules from the root. * Add KUI Yeoman generator. * Support creation of components. * Add documentation generator for main page, demo, and sandbox. - Add additional documentation snippets to KUI generator. (#13076) - Fix incorrect use of double quotes in KUI generator snippet. (#13086) - Remove infrequently used imports from the KUI generator test template. (#13110) * Mock assets files for Jest. (#13060) * Fix broken coverage report paths in Jest config. (#13082) * Update eslint config to lint the new UI Framework directory structure. (#13102) * Fix positioning of doc site pagination buttons. (#13203) * Support hasReact prop for sandboxes. (#13270) * Remove deprecated used of component mixin from KUI generator's SCSS template. (#13377) * Fix rebasing errors. - Add dashboard back to Jest config. - Add missing form and tool_bar variables. * Rename tasks to createComponent and documentComponent. * Reference correct src paths in README. * Add children and className to templates' propTypes. * Add default folder name for page demo. * Add suffix to sandbox routes. * Specify testPathIgnorePatterns more clearly. * Rename component.test.js to test.js so that Jenkins won't try to run it. * Update npm scripts to depend on local yo dependency, not global. * Add ui_framework/src to copy task. * Simplify npm scripts and remove requirement for installing Yeoman from README. * Add services to moduleNameMapper in jest config. * Clean up Button and Gallery examples. --- .gitignore | 1 + STYLEGUIDE.md | 1 + package.json | 9 +- src/jest/config.json | 17 +- src/ui/public/modals/confirm_modal.js | 5 +- style_guides/css_style_guide.md | 16 ++ style_guides/scss_style_guide.md | 16 ++ tasks/config/copy.js | 1 + tasks/config/eslint.js | 5 +- tasks/ui_framework.js | 4 +- ui_framework/README.md | 109 ++++++--- ui_framework/components/_variables.scss | 112 --------- .../components/accessibility/_index.scss | 1 - ui_framework/components/index.js | 124 +--------- ui_framework/doc_site/build/index.html | 2 +- .../doc_site/src/components/guide/_guide.scss | 103 +++++++++ .../src/components/guide_components.scss | 49 ++++ .../src/components/guide_nav/_guide_nav.scss | 2 +- .../src/components/guide_nav/guide_nav.js | 6 + .../components/guide_page/_guide_page.scss | 2 - ui_framework/doc_site/src/main.scss | 114 --------- ui_framework/doc_site/src/variables.scss | 47 ---- .../doc_site/src/views/button/button_basic.js | 1 + .../src/views/button/button_danger.js | 1 + .../src/views/button/button_elements.js | 9 +- .../src/views/button/button_example.js | 23 -- .../src/views/button/button_hollow.js | 1 + .../src/views/button/button_loading.js | 1 + .../src/views/button/button_primary.js | 1 + .../src/views/button/button_secondary.js | 1 + .../src/views/button/button_warning.js | 1 + .../src/views/button/button_with_icon.js | 5 + .../src/views/button/buttons_in_tool_bar.js | 64 ------ .../src/views/color_picker/color_picker.js | 2 +- .../views/color_picker/color_picker_clear.js | 2 +- .../color_picker_no_color_label.js | 2 +- .../doc_site/src/views/gallery/gallery.js | 8 +- .../src/views/modal/confirm_modal_example.js | 2 +- .../doc_site/src/views/modal/modal_example.js | 22 +- .../doc_site/src/views/modal/static.js | 16 ++ ui_framework/generator-kui/app/component.js | 28 +++ .../generator-kui/app/documentation.js | 31 +++ ui_framework/generator-kui/component/index.js | 141 ++++++++++++ .../component/templates/_component.scss | 3 + .../component/templates/_index.scss | 1 + .../component/templates/component.js | 35 +++ .../component/templates/index.js | 1 + .../component/templates/stateless_function.js | 21 ++ .../generator-kui/component/templates/test.js | 16 ++ .../generator-kui/documentation/index.js | 217 ++++++++++++++++++ .../templates/documentation_page.js | 38 +++ .../templates/documentation_page_demo.js | 11 + .../templates/documentation_sandbox.html | 1 + .../templates/documentation_sandbox.js | 27 +++ ui_framework/generator-kui/utils.js | 35 +++ ui_framework/services/index.js | 12 +- .../keyboard_accessible.test.js.snap | 0 .../__snapshots__/screen_reader.test.js.snap | 0 .../src/components/accessibility/_index.scss | 1 + .../accessibility/_screen_reader.scss | 0 .../components/accessibility/index.js | 0 .../accessibility/keyboard_accessible.js | 0 .../accessibility/keyboard_accessible.test.js | 0 .../components/accessibility/screen_reader.js | 0 .../accessibility/screen_reader.test.js | 0 .../__snapshots__/action_item.test.js.snap | 0 .../components/action_item/_action_item.scss | 0 .../components/action_item/_index.scss | 0 .../components/action_item/action_item.js | 0 .../action_item/action_item.test.js | 0 .../{ => src}/components/action_item/index.js | 0 .../{ => src}/components/badge/_badge.scss | 0 .../{ => src}/components/badge/_index.scss | 0 .../bar/__snapshots__/bar.test.js.snap | 0 .../__snapshots__/bar_section.test.js.snap | 0 .../{ => src}/components/bar/_bar.scss | 0 .../components/bar/_bar_section.scss | 0 .../{ => src}/components/bar/_index.scss | 0 ui_framework/{ => src}/components/bar/bar.js | 0 .../{ => src}/components/bar/bar.test.js | 0 .../{ => src}/components/bar/bar_section.js | 0 .../components/bar/bar_section.test.js | 0 .../{ => src}/components/bar/index.js | 0 .../button/__snapshots__/button.test.js.snap | 0 .../__snapshots__/link_button.test.js.snap | 0 .../__snapshots__/submit_button.test.js.snap | 0 .../{ => src}/components/button/_button.scss | 0 .../{ => src}/components/button/_index.scss | 0 .../{ => src}/components/button/button.js | 0 .../components/button/button.test.js | 0 .../__snapshots__/button_group.test.js.snap | 0 .../button/button_group/_button_group.scss | 0 .../button/button_group/button_group.js | 0 .../button/button_group/button_group.test.js | 0 .../__snapshots__/button_icon.test.js.snap | 0 .../button/button_icon/button_icon.js | 0 .../button/button_icon/button_icon.test.js | 0 .../{ => src}/components/button/index.js | 0 .../components/button/link_button.test.js | 0 .../components/button/submit_button.test.js | 0 .../card/__snapshots__/card.test.js.snap | 0 .../card_description.test.js.snap | 0 .../card_description_text.test.js.snap | 0 .../card_description_title.test.js.snap | 0 .../__snapshots__/card_footer.test.js.snap | 0 .../__snapshots__/card_group.test.js.snap | 0 .../{ => src}/components/card/_card.scss | 0 .../components/card/_card_group.scss | 0 .../{ => src}/components/card/_index.scss | 0 .../{ => src}/components/card/card.js | 0 .../{ => src}/components/card/card.test.js | 0 .../components/card/card_description.js | 0 .../components/card/card_description.test.js | 0 .../components/card/card_description_text.js | 0 .../card/card_description_text.test.js | 0 .../components/card/card_description_title.js | 0 .../card/card_description_title.test.js | 0 .../{ => src}/components/card/card_footer.js | 0 .../components/card/card_footer.test.js | 0 .../{ => src}/components/card/card_group.js | 0 .../components/card/card_group.test.js | 0 .../{ => src}/components/card/index.js | 0 .../collapse_button.test.js.snap | 0 .../collapse_button/_collapse_button.scss | 0 .../components/collapse_button/_index.scss | 0 .../collapse_button/collapse_button.js | 0 .../collapse_button/collapse_button.test.js | 0 .../components/collapse_button/index.js | 0 .../__snapshots__/color_picker.test.js.snap | 0 .../color_picker/_color_picker.scss | 0 .../components/color_picker/_index.scss | 0 .../components/color_picker/color_picker.js | 0 .../color_picker/color_picker.test.js | 0 .../color_picker/color_picker_empty_swatch.js | 0 .../color_picker/color_picker_swatch.js | 0 .../components/color_picker/index.js | 0 .../{ => src}/components/column/_column.scss | 0 .../{ => src}/components/column/_index.scss | 0 .../empty_table_prompt.test.js.snap | 0 .../empty_table_prompt_actions.test.js.snap | 0 .../empty_table_prompt_message.test.js.snap | 0 .../empty_table_prompt_panel.test.js.snap | 0 .../_empty_table_prompt.scss | 0 .../components/empty_table_prompt/_index.scss | 0 .../empty_table_prompt/empty_table_prompt.js | 0 .../empty_table_prompt.test.js | 0 .../empty_table_prompt_actions.js | 0 .../empty_table_prompt_actions.test.js | 0 .../empty_table_prompt_message.js | 0 .../empty_table_prompt_message.test.js | 0 .../empty_table_prompt_panel.js | 0 .../empty_table_prompt_panel.test.js | 0 .../components/empty_table_prompt/index.js | 0 .../event/__snapshots__/event.test.js.snap | 0 .../__snapshots__/event_body.test.js.snap | 0 .../event_body_message.test.js.snap | 0 .../event_body_metadata.test.js.snap | 0 .../__snapshots__/event_symbol.test.js.snap | 0 .../{ => src}/components/event/_event.scss | 0 .../{ => src}/components/event/_index.scss | 0 .../{ => src}/components/event/event.js | 0 .../{ => src}/components/event/event.test.js | 0 .../{ => src}/components/event/event_body.js | 0 .../components/event/event_body.test.js | 0 .../components/event/event_body_message.js | 0 .../event/event_body_message.test.js | 0 .../components/event/event_body_metadata.js | 0 .../event/event_body_metadata.test.js | 0 .../components/event/event_symbol.js | 0 .../components/event/event_symbol.test.js | 0 .../{ => src}/components/event/index.js | 0 .../components/expression/_expression.scss | 0 .../components/expression/_index.scss | 0 .../components/form/_assisted_input.scss | 0 .../{ => src}/components/form/_check_box.scss | 0 .../{ => src}/components/form/_index.scss | 0 .../{ => src}/components/form/_label.scss | 0 .../components/form/_search_input.scss | 0 .../{ => src}/components/form/_select.scss | 0 .../components/form/_static_input.scss | 0 .../{ => src}/components/form/_text_area.scss | 0 .../components/form/_text_input.scss | 0 .../__snapshots__/field_group.test.js.snap | 0 .../field_group_section.test.js.snap | 0 .../components/form_layout/_field_group.scss | 0 .../components/form_layout/_index.scss | 0 .../components/form_layout/field_group.js | 0 .../form_layout/field_group.test.js | 0 .../form_layout/field_group_section.js | 0 .../form_layout/field_group_section.test.js | 0 .../{ => src}/components/form_layout/index.js | 0 .../__snapshots__/gallery.test.js.snap | 0 .../components/gallery/_gallery.scss | 0 .../components/gallery/_gallery_button.scss | 0 .../{ => src}/components/gallery/_index.scss | 0 .../{ => src}/components/gallery/gallery.js | 0 .../components/gallery/gallery.test.js | 0 .../__snapshots__/gallery_button.test.js.snap | 0 .../gallery_button_icon.test.js.snap | 0 .../gallery_button_image.test.js.snap | 0 .../gallery_button_label.test.js.snap | 0 .../gallery/gallery_button/gallery_button.js | 0 .../gallery_button/gallery_button.test.js | 0 .../gallery_button/gallery_button_icon.js | 0 .../gallery_button_icon.test.js | 0 .../gallery_button/gallery_button_image.js | 0 .../gallery_button_image.test.js | 0 .../gallery_button/gallery_button_label.js | 0 .../gallery_button_label.test.js | 0 .../{ => src}/components/gallery/index.js | 0 .../__snapshots__/header_bar.test.js.snap | 0 .../header_bar_section.test.js.snap | 0 .../components/header_bar/_header_bar.scss | 0 .../components/header_bar/_index.scss | 0 .../components/header_bar/header_bar.js | 0 .../components/header_bar/header_bar.test.js | 0 .../header_bar/header_bar_section.js | 0 .../header_bar/header_bar_section.test.js | 0 .../{ => src}/components/header_bar/index.js | 0 .../{ => src}/components/icon/_icon.scss | 0 .../{ => src}/components/icon/_index.scss | 0 ui_framework/src/components/index.js | 133 +++++++++++ ui_framework/{ => src}/components/index.scss | 7 - .../__snapshots__/info_button.test.js.snap | 0 .../components/info_button/_index.scss | 0 .../components/info_button/_info_button.scss | 0 .../{ => src}/components/info_button/index.js | 0 .../components/info_button/info_button.js | 0 .../info_button/info_button.test.js | 0 .../components/info_panel/_index.scss | 0 .../components/info_panel/_info_panel.scss | 0 .../{ => src}/components/link/_index.scss | 0 .../{ => src}/components/link/_link.scss | 0 .../__snapshots__/local_nav.test.js.snap | 0 .../__snapshots__/local_nav_row.test.js.snap | 0 .../local_nav_row_section.test.js.snap | 0 .../__snapshots__/local_tab.test.js.snap | 0 .../__snapshots__/local_tabs.test.js.snap | 0 .../__snapshots__/local_title.test.js.snap | 0 .../components/local_nav/_index.scss | 0 .../local_nav/_local_breadcrumbs.scss | 0 .../local_nav/_local_date_picker.scss | 0 .../components/local_nav/_local_dropdown.scss | 0 .../components/local_nav/_local_menu.scss | 0 .../components/local_nav/_local_nav.scss | 0 .../components/local_nav/_local_search.scss | 0 .../components/local_nav/_local_tabs.scss | 0 .../components/local_nav/_local_title.scss | 0 .../{ => src}/components/local_nav/index.js | 0 .../components/local_nav/local_nav.js | 0 .../components/local_nav/local_nav.test.js | 0 .../components/local_nav/local_nav_row.js | 0 .../local_nav/local_nav_row.test.js | 0 .../local_nav/local_nav_row_section.js | 0 .../local_nav/local_nav_row_section.test.js | 0 .../components/local_nav/local_tab.js | 0 .../components/local_nav/local_tab.test.js | 0 .../components/local_nav/local_tabs.js | 0 .../components/local_nav/local_tabs.test.js | 0 .../components/local_nav/local_title.js | 0 .../components/local_nav/local_title.test.js | 0 .../menu/__snapshots__/menu.test.js.snap | 0 .../menu/__snapshots__/menu_item.test.js.snap | 0 .../{ => src}/components/menu/_index.scss | 0 .../{ => src}/components/menu/_menu.scss | 0 .../{ => src}/components/menu/index.js | 0 .../{ => src}/components/menu/menu.js | 0 .../{ => src}/components/menu/menu.test.js | 0 .../{ => src}/components/menu/menu_item.js | 0 .../components/menu/menu_item.test.js | 0 .../components/menu_button/_index.scss | 0 .../components/menu_button/_menu_button.scss | 0 .../menu_button/_menu_button_group.scss | 0 .../components/micro_button/_index.scss | 0 .../micro_button/_micro_button.scss | 0 .../micro_button/_micro_button_group.scss | 0 .../__snapshots__/confirm_modal.test.js.snap | 0 .../modal/__snapshots__/modal.test.js.snap | 0 .../__snapshots__/modal_body.test.js.snap | 0 .../modal_body_text.test.js.snap | 0 .../__snapshots__/modal_footer.test.js.snap | 0 .../__snapshots__/modal_header.test.js.snap | 0 .../modal_header_title.test.js.snap | 0 .../__snapshots__/modal_overlay.test.js.snap | 0 .../{ => src}/components/modal/_index.scss | 0 .../{ => src}/components/modal/_modal.scss | 0 .../components/modal/_modal_overlay.scss | 0 .../components/modal/confirm_modal.js | 0 .../components/modal/confirm_modal.test.js | 0 .../{ => src}/components/modal/index.js | 6 +- .../{ => src}/components/modal/modal.js | 0 .../{ => src}/components/modal/modal.test.js | 0 .../{ => src}/components/modal/modal_body.js | 0 .../components/modal/modal_body.test.js | 0 .../components/modal/modal_body_text.js | 0 .../components/modal/modal_body_text.test.js | 0 .../components/modal/modal_footer.js | 0 .../components/modal/modal_footer.test.js | 0 .../components/modal/modal_header.js | 0 .../components/modal/modal_header.test.js | 0 .../components/modal/modal_header_title.js | 0 .../modal/modal_header_title.test.js | 0 .../components/modal/modal_overlay.js | 0 .../components/modal/modal_overlay.test.js | 0 .../{ => src}/components/notice/_index.scss | 0 .../{ => src}/components/notice/_notice.scss | 0 .../pager/__snapshots__/pager.test.js.snap | 0 .../pager_button_group.test.js.snap | 0 .../{ => src}/components/pager/_index.scss | 0 .../{ => src}/components/pager/_pager.scss | 0 .../{ => src}/components/pager/index.js | 0 .../{ => src}/components/pager/pager.js | 0 .../{ => src}/components/pager/pager.test.js | 0 .../components/pager/pager_button_group.js | 0 .../pager/pager_button_group.test.js | 0 .../{ => src}/components/panel/_index.scss | 0 .../{ => src}/components/panel/_panel.scss | 0 .../__snapshots__/popover.test.js.snap | 0 .../{ => src}/components/popover/_index.scss | 0 .../components/popover/_popover.scss | 0 .../{ => src}/components/popover/index.js | 0 .../{ => src}/components/popover/popover.js | 0 .../components/popover/popover.test.js | 0 .../components/status_text/_index.scss | 0 .../components/status_text/_status_text.scss | 0 .../controlled_table.test.js.snap | 0 .../table/__snapshots__/table.test.js.snap | 0 .../table_header_cell.test.js.snap | 0 .../table_header_check_box_cell.test.js.snap | 0 .../__snapshots__/table_info.test.js.snap | 0 .../__snapshots__/table_row.test.js.snap | 0 .../__snapshots__/table_row_cell.test.js.snap | 0 .../table_row_check_box_cell.test.js.snap | 0 .../components/table/_controlled_table.scss | 0 .../{ => src}/components/table/_index.scss | 0 .../{ => src}/components/table/_table.scss | 0 .../components/table/controlled_table.js | 0 .../components/table/controlled_table.test.js | 0 .../{ => src}/components/table/index.js | 0 .../{ => src}/components/table/table.js | 0 .../{ => src}/components/table/table.test.js | 0 .../{ => src}/components/table/table_body.js | 0 .../components/table/table_header.js | 0 .../components/table/table_header_cell.js | 0 .../table/table_header_cell.test.js | 0 .../table/table_header_check_box_cell.js | 0 .../table/table_header_check_box_cell.test.js | 0 .../{ => src}/components/table/table_info.js | 0 .../components/table/table_info.test.js | 0 .../{ => src}/components/table/table_row.js | 0 .../components/table/table_row.test.js | 0 .../components/table/table_row_cell.js | 0 .../components/table/table_row_cell.test.js | 0 .../table/table_row_check_box_cell.js | 0 .../table/table_row_check_box_cell.test.js | 0 .../components/table_info/_index.scss | 0 .../components/table_info/_table_info.scss | 0 .../tabs/__snapshots__/tab.test.js.snap | 0 .../tabs/__snapshots__/tabs.test.js.snap | 0 .../{ => src}/components/tabs/_index.scss | 0 .../{ => src}/components/tabs/_tabs.scss | 0 .../{ => src}/components/tabs/index.js | 0 ui_framework/{ => src}/components/tabs/tab.js | 0 .../{ => src}/components/tabs/tab.test.js | 0 .../{ => src}/components/tabs/tabs.js | 0 .../{ => src}/components/tabs/tabs.test.js | 0 .../components/toggle_button/_index.scss | 0 .../toggle_button/_toggle_button.scss | 0 .../toggle_button/_toggle_panel.scss | 0 .../__snapshots__/tool_bar.test.js.snap | 0 .../tool_bar_footer.test.js.snap | 0 .../tool_bar_footer_section.test.js.snap | 0 .../tool_bar_search_box.test.js.snap | 0 .../tool_bar_section.test.js.snap | 0 .../__snapshots__/tool_bar_text.test.js.snap | 0 .../{ => src}/components/tool_bar/_index.scss | 0 .../components/tool_bar/_tool_bar.scss | 0 .../components/tool_bar/_tool_bar_footer.scss | 0 .../components/tool_bar/_tool_bar_search.scss | 0 .../components/tool_bar/_tool_bar_text.scss | 0 .../{ => src}/components/tool_bar/index.js | 0 .../{ => src}/components/tool_bar/tool_bar.js | 0 .../components/tool_bar/tool_bar.test.js | 0 .../components/tool_bar/tool_bar_footer.js | 0 .../tool_bar/tool_bar_footer.test.js | 0 .../tool_bar/tool_bar_footer_section.js | 0 .../tool_bar/tool_bar_footer_section.test.js | 0 .../tool_bar/tool_bar_search_box.js | 0 .../tool_bar/tool_bar_search_box.test.js | 0 .../components/tool_bar/tool_bar_section.js | 0 .../tool_bar/tool_bar_section.test.js | 0 .../components/tool_bar/tool_bar_text.js | 0 .../components/tool_bar/tool_bar_text.test.js | 0 .../__snapshots__/typography.test.js.snap | 37 +++ .../components/typography/_index.scss | 0 .../components/typography/_typography.scss | 0 .../src/components/typography/typography.js | 43 ++++ .../components/typography/typography.test.js | 50 ++++ .../components/vertical_rhythm/_index.scss | 0 .../vertical_rhythm/_vertical_rhythm.scss | 0 .../{ => src}/components/view/_index.scss | 0 .../{ => src}/components/view/_view.scss | 0 .../mixins/_global_mixins.scss} | 0 .../src/global_styling/mixins/_index.scss | 1 + .../src/global_styling/reset/_index.scss | 1 + .../global_styling/reset/_reset.scss} | 0 .../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 ui_framework/src/index.scss | 11 + .../accessibility/accessible_click_keys.js | 0 .../accessibility/combo_box_key_codes.js | 0 .../{ => src}/services/accessibility/index.js | 0 ui_framework/{ => src}/services/alignment.js | 0 ui_framework/src/services/index.js | 11 + ui_framework/{ => src}/services/key_codes.js | 0 ui_framework/{ => src}/services/sort/index.js | 0 .../services/sort/sortable_properties.js | 0 .../services/sort/sortable_properties.test.js | 1 - ui_framework/{ => src}/test/required_props.js | 0 .../src/themes/light_theme/_index.scss | 0 429 files changed, 1356 insertions(+), 578 deletions(-) create mode 100644 style_guides/scss_style_guide.md delete mode 100644 ui_framework/components/_variables.scss delete mode 100644 ui_framework/components/accessibility/_index.scss create mode 100644 ui_framework/doc_site/src/components/guide/_guide.scss delete mode 100644 ui_framework/doc_site/src/variables.scss delete mode 100644 ui_framework/doc_site/src/views/button/buttons_in_tool_bar.js create mode 100644 ui_framework/doc_site/src/views/modal/static.js create mode 100644 ui_framework/generator-kui/app/component.js create mode 100644 ui_framework/generator-kui/app/documentation.js create mode 100644 ui_framework/generator-kui/component/index.js create mode 100644 ui_framework/generator-kui/component/templates/_component.scss create mode 100644 ui_framework/generator-kui/component/templates/_index.scss create mode 100644 ui_framework/generator-kui/component/templates/component.js create mode 100644 ui_framework/generator-kui/component/templates/index.js create mode 100644 ui_framework/generator-kui/component/templates/stateless_function.js create mode 100644 ui_framework/generator-kui/component/templates/test.js create mode 100644 ui_framework/generator-kui/documentation/index.js create mode 100644 ui_framework/generator-kui/documentation/templates/documentation_page.js create mode 100644 ui_framework/generator-kui/documentation/templates/documentation_page_demo.js create mode 100644 ui_framework/generator-kui/documentation/templates/documentation_sandbox.html create mode 100644 ui_framework/generator-kui/documentation/templates/documentation_sandbox.js create mode 100644 ui_framework/generator-kui/utils.js rename ui_framework/{ => src}/components/accessibility/__snapshots__/keyboard_accessible.test.js.snap (100%) rename ui_framework/{ => src}/components/accessibility/__snapshots__/screen_reader.test.js.snap (100%) create mode 100644 ui_framework/src/components/accessibility/_index.scss rename ui_framework/{ => src}/components/accessibility/_screen_reader.scss (100%) rename ui_framework/{ => src}/components/accessibility/index.js (100%) rename ui_framework/{ => src}/components/accessibility/keyboard_accessible.js (100%) rename ui_framework/{ => src}/components/accessibility/keyboard_accessible.test.js (100%) rename ui_framework/{ => src}/components/accessibility/screen_reader.js (100%) rename ui_framework/{ => src}/components/accessibility/screen_reader.test.js (100%) rename ui_framework/{ => src}/components/action_item/__snapshots__/action_item.test.js.snap (100%) rename ui_framework/{ => src}/components/action_item/_action_item.scss (100%) rename ui_framework/{ => src}/components/action_item/_index.scss (100%) rename ui_framework/{ => src}/components/action_item/action_item.js (100%) rename ui_framework/{ => src}/components/action_item/action_item.test.js (100%) rename ui_framework/{ => src}/components/action_item/index.js (100%) rename ui_framework/{ => src}/components/badge/_badge.scss (100%) rename ui_framework/{ => src}/components/badge/_index.scss (100%) rename ui_framework/{ => src}/components/bar/__snapshots__/bar.test.js.snap (100%) rename ui_framework/{ => src}/components/bar/__snapshots__/bar_section.test.js.snap (100%) rename ui_framework/{ => src}/components/bar/_bar.scss (100%) rename ui_framework/{ => src}/components/bar/_bar_section.scss (100%) rename ui_framework/{ => src}/components/bar/_index.scss (100%) rename ui_framework/{ => src}/components/bar/bar.js (100%) rename ui_framework/{ => src}/components/bar/bar.test.js (100%) rename ui_framework/{ => src}/components/bar/bar_section.js (100%) rename ui_framework/{ => src}/components/bar/bar_section.test.js (100%) rename ui_framework/{ => src}/components/bar/index.js (100%) rename ui_framework/{ => src}/components/button/__snapshots__/button.test.js.snap (100%) rename ui_framework/{ => src}/components/button/__snapshots__/link_button.test.js.snap (100%) rename ui_framework/{ => src}/components/button/__snapshots__/submit_button.test.js.snap (100%) rename ui_framework/{ => src}/components/button/_button.scss (100%) rename ui_framework/{ => src}/components/button/_index.scss (100%) rename ui_framework/{ => src}/components/button/button.js (100%) rename ui_framework/{ => src}/components/button/button.test.js (100%) rename ui_framework/{ => src}/components/button/button_group/__snapshots__/button_group.test.js.snap (100%) rename ui_framework/{ => src}/components/button/button_group/_button_group.scss (100%) rename ui_framework/{ => src}/components/button/button_group/button_group.js (100%) rename ui_framework/{ => src}/components/button/button_group/button_group.test.js (100%) rename ui_framework/{ => src}/components/button/button_icon/__snapshots__/button_icon.test.js.snap (100%) rename ui_framework/{ => src}/components/button/button_icon/button_icon.js (100%) rename ui_framework/{ => src}/components/button/button_icon/button_icon.test.js (100%) rename ui_framework/{ => src}/components/button/index.js (100%) rename ui_framework/{ => src}/components/button/link_button.test.js (100%) rename ui_framework/{ => src}/components/button/submit_button.test.js (100%) rename ui_framework/{ => src}/components/card/__snapshots__/card.test.js.snap (100%) rename ui_framework/{ => src}/components/card/__snapshots__/card_description.test.js.snap (100%) rename ui_framework/{ => src}/components/card/__snapshots__/card_description_text.test.js.snap (100%) rename ui_framework/{ => src}/components/card/__snapshots__/card_description_title.test.js.snap (100%) rename ui_framework/{ => src}/components/card/__snapshots__/card_footer.test.js.snap (100%) rename ui_framework/{ => src}/components/card/__snapshots__/card_group.test.js.snap (100%) rename ui_framework/{ => src}/components/card/_card.scss (100%) rename ui_framework/{ => src}/components/card/_card_group.scss (100%) rename ui_framework/{ => src}/components/card/_index.scss (100%) rename ui_framework/{ => src}/components/card/card.js (100%) rename ui_framework/{ => src}/components/card/card.test.js (100%) rename ui_framework/{ => src}/components/card/card_description.js (100%) rename ui_framework/{ => src}/components/card/card_description.test.js (100%) rename ui_framework/{ => src}/components/card/card_description_text.js (100%) rename ui_framework/{ => src}/components/card/card_description_text.test.js (100%) rename ui_framework/{ => src}/components/card/card_description_title.js (100%) rename ui_framework/{ => src}/components/card/card_description_title.test.js (100%) rename ui_framework/{ => src}/components/card/card_footer.js (100%) rename ui_framework/{ => src}/components/card/card_footer.test.js (100%) rename ui_framework/{ => src}/components/card/card_group.js (100%) rename ui_framework/{ => src}/components/card/card_group.test.js (100%) rename ui_framework/{ => src}/components/card/index.js (100%) rename ui_framework/{ => src}/components/collapse_button/__snapshots__/collapse_button.test.js.snap (100%) rename ui_framework/{ => src}/components/collapse_button/_collapse_button.scss (100%) rename ui_framework/{ => src}/components/collapse_button/_index.scss (100%) rename ui_framework/{ => src}/components/collapse_button/collapse_button.js (100%) rename ui_framework/{ => src}/components/collapse_button/collapse_button.test.js (100%) rename ui_framework/{ => src}/components/collapse_button/index.js (100%) rename ui_framework/{ => src}/components/color_picker/__snapshots__/color_picker.test.js.snap (100%) rename ui_framework/{ => src}/components/color_picker/_color_picker.scss (100%) rename ui_framework/{ => src}/components/color_picker/_index.scss (100%) rename ui_framework/{ => src}/components/color_picker/color_picker.js (100%) rename ui_framework/{ => src}/components/color_picker/color_picker.test.js (100%) rename ui_framework/{ => src}/components/color_picker/color_picker_empty_swatch.js (100%) rename ui_framework/{ => src}/components/color_picker/color_picker_swatch.js (100%) rename ui_framework/{ => src}/components/color_picker/index.js (100%) rename ui_framework/{ => src}/components/column/_column.scss (100%) rename ui_framework/{ => src}/components/column/_index.scss (100%) rename ui_framework/{ => src}/components/empty_table_prompt/__snapshots__/empty_table_prompt.test.js.snap (100%) rename ui_framework/{ => src}/components/empty_table_prompt/__snapshots__/empty_table_prompt_actions.test.js.snap (100%) rename ui_framework/{ => src}/components/empty_table_prompt/__snapshots__/empty_table_prompt_message.test.js.snap (100%) rename ui_framework/{ => src}/components/empty_table_prompt/__snapshots__/empty_table_prompt_panel.test.js.snap (100%) rename ui_framework/{ => src}/components/empty_table_prompt/_empty_table_prompt.scss (100%) rename ui_framework/{ => src}/components/empty_table_prompt/_index.scss (100%) rename ui_framework/{ => src}/components/empty_table_prompt/empty_table_prompt.js (100%) rename ui_framework/{ => src}/components/empty_table_prompt/empty_table_prompt.test.js (100%) rename ui_framework/{ => src}/components/empty_table_prompt/empty_table_prompt_actions.js (100%) rename ui_framework/{ => src}/components/empty_table_prompt/empty_table_prompt_actions.test.js (100%) rename ui_framework/{ => src}/components/empty_table_prompt/empty_table_prompt_message.js (100%) rename ui_framework/{ => src}/components/empty_table_prompt/empty_table_prompt_message.test.js (100%) rename ui_framework/{ => src}/components/empty_table_prompt/empty_table_prompt_panel.js (100%) rename ui_framework/{ => src}/components/empty_table_prompt/empty_table_prompt_panel.test.js (100%) rename ui_framework/{ => src}/components/empty_table_prompt/index.js (100%) rename ui_framework/{ => src}/components/event/__snapshots__/event.test.js.snap (100%) rename ui_framework/{ => src}/components/event/__snapshots__/event_body.test.js.snap (100%) rename ui_framework/{ => src}/components/event/__snapshots__/event_body_message.test.js.snap (100%) rename ui_framework/{ => src}/components/event/__snapshots__/event_body_metadata.test.js.snap (100%) rename ui_framework/{ => src}/components/event/__snapshots__/event_symbol.test.js.snap (100%) rename ui_framework/{ => src}/components/event/_event.scss (100%) rename ui_framework/{ => src}/components/event/_index.scss (100%) rename ui_framework/{ => src}/components/event/event.js (100%) rename ui_framework/{ => src}/components/event/event.test.js (100%) rename ui_framework/{ => src}/components/event/event_body.js (100%) rename ui_framework/{ => src}/components/event/event_body.test.js (100%) rename ui_framework/{ => src}/components/event/event_body_message.js (100%) rename ui_framework/{ => src}/components/event/event_body_message.test.js (100%) rename ui_framework/{ => src}/components/event/event_body_metadata.js (100%) rename ui_framework/{ => src}/components/event/event_body_metadata.test.js (100%) rename ui_framework/{ => src}/components/event/event_symbol.js (100%) rename ui_framework/{ => src}/components/event/event_symbol.test.js (100%) rename ui_framework/{ => src}/components/event/index.js (100%) rename ui_framework/{ => src}/components/expression/_expression.scss (100%) rename ui_framework/{ => src}/components/expression/_index.scss (100%) rename ui_framework/{ => src}/components/form/_assisted_input.scss (100%) rename ui_framework/{ => src}/components/form/_check_box.scss (100%) rename ui_framework/{ => src}/components/form/_index.scss (100%) rename ui_framework/{ => src}/components/form/_label.scss (100%) rename ui_framework/{ => src}/components/form/_search_input.scss (100%) rename ui_framework/{ => src}/components/form/_select.scss (100%) rename ui_framework/{ => src}/components/form/_static_input.scss (100%) rename ui_framework/{ => src}/components/form/_text_area.scss (100%) rename ui_framework/{ => src}/components/form/_text_input.scss (100%) rename ui_framework/{ => src}/components/form_layout/__snapshots__/field_group.test.js.snap (100%) rename ui_framework/{ => src}/components/form_layout/__snapshots__/field_group_section.test.js.snap (100%) rename ui_framework/{ => src}/components/form_layout/_field_group.scss (100%) rename ui_framework/{ => src}/components/form_layout/_index.scss (100%) rename ui_framework/{ => src}/components/form_layout/field_group.js (100%) rename ui_framework/{ => src}/components/form_layout/field_group.test.js (100%) rename ui_framework/{ => src}/components/form_layout/field_group_section.js (100%) rename ui_framework/{ => src}/components/form_layout/field_group_section.test.js (100%) rename ui_framework/{ => src}/components/form_layout/index.js (100%) rename ui_framework/{ => src}/components/gallery/__snapshots__/gallery.test.js.snap (100%) rename ui_framework/{ => src}/components/gallery/_gallery.scss (100%) rename ui_framework/{ => src}/components/gallery/_gallery_button.scss (100%) rename ui_framework/{ => src}/components/gallery/_index.scss (100%) rename ui_framework/{ => src}/components/gallery/gallery.js (100%) rename ui_framework/{ => src}/components/gallery/gallery.test.js (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/__snapshots__/gallery_button.test.js.snap (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/__snapshots__/gallery_button_icon.test.js.snap (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/__snapshots__/gallery_button_image.test.js.snap (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/__snapshots__/gallery_button_label.test.js.snap (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/gallery_button.js (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/gallery_button.test.js (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/gallery_button_icon.js (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/gallery_button_icon.test.js (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/gallery_button_image.js (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/gallery_button_image.test.js (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/gallery_button_label.js (100%) rename ui_framework/{ => src}/components/gallery/gallery_button/gallery_button_label.test.js (100%) rename ui_framework/{ => src}/components/gallery/index.js (100%) rename ui_framework/{ => src}/components/header_bar/__snapshots__/header_bar.test.js.snap (100%) rename ui_framework/{ => src}/components/header_bar/__snapshots__/header_bar_section.test.js.snap (100%) rename ui_framework/{ => src}/components/header_bar/_header_bar.scss (100%) rename ui_framework/{ => src}/components/header_bar/_index.scss (100%) rename ui_framework/{ => src}/components/header_bar/header_bar.js (100%) rename ui_framework/{ => src}/components/header_bar/header_bar.test.js (100%) rename ui_framework/{ => src}/components/header_bar/header_bar_section.js (100%) rename ui_framework/{ => src}/components/header_bar/header_bar_section.test.js (100%) rename ui_framework/{ => src}/components/header_bar/index.js (100%) rename ui_framework/{ => src}/components/icon/_icon.scss (100%) rename ui_framework/{ => src}/components/icon/_index.scss (100%) create mode 100644 ui_framework/src/components/index.js rename ui_framework/{ => src}/components/index.scss (95%) rename ui_framework/{ => src}/components/info_button/__snapshots__/info_button.test.js.snap (100%) rename ui_framework/{ => src}/components/info_button/_index.scss (100%) rename ui_framework/{ => src}/components/info_button/_info_button.scss (100%) rename ui_framework/{ => src}/components/info_button/index.js (100%) rename ui_framework/{ => src}/components/info_button/info_button.js (100%) rename ui_framework/{ => src}/components/info_button/info_button.test.js (100%) rename ui_framework/{ => src}/components/info_panel/_index.scss (100%) rename ui_framework/{ => src}/components/info_panel/_info_panel.scss (100%) rename ui_framework/{ => src}/components/link/_index.scss (100%) rename ui_framework/{ => src}/components/link/_link.scss (100%) rename ui_framework/{ => src}/components/local_nav/__snapshots__/local_nav.test.js.snap (100%) rename ui_framework/{ => src}/components/local_nav/__snapshots__/local_nav_row.test.js.snap (100%) rename ui_framework/{ => src}/components/local_nav/__snapshots__/local_nav_row_section.test.js.snap (100%) rename ui_framework/{ => src}/components/local_nav/__snapshots__/local_tab.test.js.snap (100%) rename ui_framework/{ => src}/components/local_nav/__snapshots__/local_tabs.test.js.snap (100%) rename ui_framework/{ => src}/components/local_nav/__snapshots__/local_title.test.js.snap (100%) rename ui_framework/{ => src}/components/local_nav/_index.scss (100%) rename ui_framework/{ => src}/components/local_nav/_local_breadcrumbs.scss (100%) rename ui_framework/{ => src}/components/local_nav/_local_date_picker.scss (100%) rename ui_framework/{ => src}/components/local_nav/_local_dropdown.scss (100%) rename ui_framework/{ => src}/components/local_nav/_local_menu.scss (100%) rename ui_framework/{ => src}/components/local_nav/_local_nav.scss (100%) rename ui_framework/{ => src}/components/local_nav/_local_search.scss (100%) rename ui_framework/{ => src}/components/local_nav/_local_tabs.scss (100%) rename ui_framework/{ => src}/components/local_nav/_local_title.scss (100%) rename ui_framework/{ => src}/components/local_nav/index.js (100%) rename ui_framework/{ => src}/components/local_nav/local_nav.js (100%) rename ui_framework/{ => src}/components/local_nav/local_nav.test.js (100%) rename ui_framework/{ => src}/components/local_nav/local_nav_row.js (100%) rename ui_framework/{ => src}/components/local_nav/local_nav_row.test.js (100%) rename ui_framework/{ => src}/components/local_nav/local_nav_row_section.js (100%) rename ui_framework/{ => src}/components/local_nav/local_nav_row_section.test.js (100%) rename ui_framework/{ => src}/components/local_nav/local_tab.js (100%) rename ui_framework/{ => src}/components/local_nav/local_tab.test.js (100%) rename ui_framework/{ => src}/components/local_nav/local_tabs.js (100%) rename ui_framework/{ => src}/components/local_nav/local_tabs.test.js (100%) rename ui_framework/{ => src}/components/local_nav/local_title.js (100%) rename ui_framework/{ => src}/components/local_nav/local_title.test.js (100%) rename ui_framework/{ => src}/components/menu/__snapshots__/menu.test.js.snap (100%) rename ui_framework/{ => src}/components/menu/__snapshots__/menu_item.test.js.snap (100%) rename ui_framework/{ => src}/components/menu/_index.scss (100%) rename ui_framework/{ => src}/components/menu/_menu.scss (100%) rename ui_framework/{ => src}/components/menu/index.js (100%) rename ui_framework/{ => src}/components/menu/menu.js (100%) rename ui_framework/{ => src}/components/menu/menu.test.js (100%) rename ui_framework/{ => src}/components/menu/menu_item.js (100%) rename ui_framework/{ => src}/components/menu/menu_item.test.js (100%) rename ui_framework/{ => src}/components/menu_button/_index.scss (100%) rename ui_framework/{ => src}/components/menu_button/_menu_button.scss (100%) rename ui_framework/{ => src}/components/menu_button/_menu_button_group.scss (100%) rename ui_framework/{ => src}/components/micro_button/_index.scss (100%) rename ui_framework/{ => src}/components/micro_button/_micro_button.scss (100%) rename ui_framework/{ => src}/components/micro_button/_micro_button_group.scss (100%) rename ui_framework/{ => src}/components/modal/__snapshots__/confirm_modal.test.js.snap (100%) rename ui_framework/{ => src}/components/modal/__snapshots__/modal.test.js.snap (100%) rename ui_framework/{ => src}/components/modal/__snapshots__/modal_body.test.js.snap (100%) rename ui_framework/{ => src}/components/modal/__snapshots__/modal_body_text.test.js.snap (100%) rename ui_framework/{ => src}/components/modal/__snapshots__/modal_footer.test.js.snap (100%) rename ui_framework/{ => src}/components/modal/__snapshots__/modal_header.test.js.snap (100%) rename ui_framework/{ => src}/components/modal/__snapshots__/modal_header_title.test.js.snap (100%) rename ui_framework/{ => src}/components/modal/__snapshots__/modal_overlay.test.js.snap (100%) rename ui_framework/{ => src}/components/modal/_index.scss (100%) rename ui_framework/{ => src}/components/modal/_modal.scss (100%) rename ui_framework/{ => src}/components/modal/_modal_overlay.scss (100%) rename ui_framework/{ => src}/components/modal/confirm_modal.js (100%) rename ui_framework/{ => src}/components/modal/confirm_modal.test.js (100%) rename ui_framework/{ => src}/components/modal/index.js (70%) rename ui_framework/{ => src}/components/modal/modal.js (100%) rename ui_framework/{ => src}/components/modal/modal.test.js (100%) rename ui_framework/{ => src}/components/modal/modal_body.js (100%) rename ui_framework/{ => src}/components/modal/modal_body.test.js (100%) rename ui_framework/{ => src}/components/modal/modal_body_text.js (100%) rename ui_framework/{ => src}/components/modal/modal_body_text.test.js (100%) rename ui_framework/{ => src}/components/modal/modal_footer.js (100%) rename ui_framework/{ => src}/components/modal/modal_footer.test.js (100%) rename ui_framework/{ => src}/components/modal/modal_header.js (100%) rename ui_framework/{ => src}/components/modal/modal_header.test.js (100%) rename ui_framework/{ => src}/components/modal/modal_header_title.js (100%) rename ui_framework/{ => src}/components/modal/modal_header_title.test.js (100%) rename ui_framework/{ => src}/components/modal/modal_overlay.js (100%) rename ui_framework/{ => src}/components/modal/modal_overlay.test.js (100%) rename ui_framework/{ => src}/components/notice/_index.scss (100%) rename ui_framework/{ => src}/components/notice/_notice.scss (100%) rename ui_framework/{ => src}/components/pager/__snapshots__/pager.test.js.snap (100%) rename ui_framework/{ => src}/components/pager/__snapshots__/pager_button_group.test.js.snap (100%) rename ui_framework/{ => src}/components/pager/_index.scss (100%) rename ui_framework/{ => src}/components/pager/_pager.scss (100%) rename ui_framework/{ => src}/components/pager/index.js (100%) rename ui_framework/{ => src}/components/pager/pager.js (100%) rename ui_framework/{ => src}/components/pager/pager.test.js (100%) rename ui_framework/{ => src}/components/pager/pager_button_group.js (100%) rename ui_framework/{ => src}/components/pager/pager_button_group.test.js (100%) rename ui_framework/{ => src}/components/panel/_index.scss (100%) rename ui_framework/{ => src}/components/panel/_panel.scss (100%) rename ui_framework/{ => src}/components/popover/__snapshots__/popover.test.js.snap (100%) rename ui_framework/{ => src}/components/popover/_index.scss (100%) rename ui_framework/{ => src}/components/popover/_popover.scss (100%) rename ui_framework/{ => src}/components/popover/index.js (100%) rename ui_framework/{ => src}/components/popover/popover.js (100%) rename ui_framework/{ => src}/components/popover/popover.test.js (100%) rename ui_framework/{ => src}/components/status_text/_index.scss (100%) rename ui_framework/{ => src}/components/status_text/_status_text.scss (100%) rename ui_framework/{ => src}/components/table/__snapshots__/controlled_table.test.js.snap (100%) rename ui_framework/{ => src}/components/table/__snapshots__/table.test.js.snap (100%) rename ui_framework/{ => src}/components/table/__snapshots__/table_header_cell.test.js.snap (100%) rename ui_framework/{ => src}/components/table/__snapshots__/table_header_check_box_cell.test.js.snap (100%) rename ui_framework/{ => src}/components/table/__snapshots__/table_info.test.js.snap (100%) rename ui_framework/{ => src}/components/table/__snapshots__/table_row.test.js.snap (100%) rename ui_framework/{ => src}/components/table/__snapshots__/table_row_cell.test.js.snap (100%) rename ui_framework/{ => src}/components/table/__snapshots__/table_row_check_box_cell.test.js.snap (100%) rename ui_framework/{ => src}/components/table/_controlled_table.scss (100%) rename ui_framework/{ => src}/components/table/_index.scss (100%) rename ui_framework/{ => src}/components/table/_table.scss (100%) rename ui_framework/{ => src}/components/table/controlled_table.js (100%) rename ui_framework/{ => src}/components/table/controlled_table.test.js (100%) rename ui_framework/{ => src}/components/table/index.js (100%) rename ui_framework/{ => src}/components/table/table.js (100%) rename ui_framework/{ => src}/components/table/table.test.js (100%) rename ui_framework/{ => src}/components/table/table_body.js (100%) rename ui_framework/{ => src}/components/table/table_header.js (100%) rename ui_framework/{ => src}/components/table/table_header_cell.js (100%) rename ui_framework/{ => src}/components/table/table_header_cell.test.js (100%) rename ui_framework/{ => src}/components/table/table_header_check_box_cell.js (100%) rename ui_framework/{ => src}/components/table/table_header_check_box_cell.test.js (100%) rename ui_framework/{ => src}/components/table/table_info.js (100%) rename ui_framework/{ => src}/components/table/table_info.test.js (100%) rename ui_framework/{ => src}/components/table/table_row.js (100%) rename ui_framework/{ => src}/components/table/table_row.test.js (100%) rename ui_framework/{ => src}/components/table/table_row_cell.js (100%) rename ui_framework/{ => src}/components/table/table_row_cell.test.js (100%) rename ui_framework/{ => src}/components/table/table_row_check_box_cell.js (100%) rename ui_framework/{ => src}/components/table/table_row_check_box_cell.test.js (100%) rename ui_framework/{ => src}/components/table_info/_index.scss (100%) rename ui_framework/{ => src}/components/table_info/_table_info.scss (100%) rename ui_framework/{ => src}/components/tabs/__snapshots__/tab.test.js.snap (100%) rename ui_framework/{ => src}/components/tabs/__snapshots__/tabs.test.js.snap (100%) rename ui_framework/{ => src}/components/tabs/_index.scss (100%) rename ui_framework/{ => src}/components/tabs/_tabs.scss (100%) rename ui_framework/{ => src}/components/tabs/index.js (100%) rename ui_framework/{ => src}/components/tabs/tab.js (100%) rename ui_framework/{ => src}/components/tabs/tab.test.js (100%) rename ui_framework/{ => src}/components/tabs/tabs.js (100%) rename ui_framework/{ => src}/components/tabs/tabs.test.js (100%) rename ui_framework/{ => src}/components/toggle_button/_index.scss (100%) rename ui_framework/{ => src}/components/toggle_button/_toggle_button.scss (100%) rename ui_framework/{ => src}/components/toggle_button/_toggle_panel.scss (100%) rename ui_framework/{ => src}/components/tool_bar/__snapshots__/tool_bar.test.js.snap (100%) rename ui_framework/{ => src}/components/tool_bar/__snapshots__/tool_bar_footer.test.js.snap (100%) rename ui_framework/{ => src}/components/tool_bar/__snapshots__/tool_bar_footer_section.test.js.snap (100%) rename ui_framework/{ => src}/components/tool_bar/__snapshots__/tool_bar_search_box.test.js.snap (100%) rename ui_framework/{ => src}/components/tool_bar/__snapshots__/tool_bar_section.test.js.snap (100%) rename ui_framework/{ => src}/components/tool_bar/__snapshots__/tool_bar_text.test.js.snap (100%) rename ui_framework/{ => src}/components/tool_bar/_index.scss (100%) rename ui_framework/{ => src}/components/tool_bar/_tool_bar.scss (100%) rename ui_framework/{ => src}/components/tool_bar/_tool_bar_footer.scss (100%) rename ui_framework/{ => src}/components/tool_bar/_tool_bar_search.scss (100%) rename ui_framework/{ => src}/components/tool_bar/_tool_bar_text.scss (100%) rename ui_framework/{ => src}/components/tool_bar/index.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar.test.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar_footer.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar_footer.test.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar_footer_section.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar_footer_section.test.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar_search_box.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar_search_box.test.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar_section.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar_section.test.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar_text.js (100%) rename ui_framework/{ => src}/components/tool_bar/tool_bar_text.test.js (100%) create mode 100644 ui_framework/src/components/typography/__snapshots__/typography.test.js.snap rename ui_framework/{ => src}/components/typography/_index.scss (100%) rename ui_framework/{ => src}/components/typography/_typography.scss (100%) create mode 100644 ui_framework/src/components/typography/typography.js create mode 100644 ui_framework/src/components/typography/typography.test.js rename ui_framework/{ => src}/components/vertical_rhythm/_index.scss (100%) rename ui_framework/{ => src}/components/vertical_rhythm/_vertical_rhythm.scss (100%) rename ui_framework/{ => src}/components/view/_index.scss (100%) rename ui_framework/{ => src}/components/view/_view.scss (100%) rename ui_framework/{components/_mixins.scss => src/global_styling/mixins/_global_mixins.scss} (100%) create mode 100644 ui_framework/src/global_styling/mixins/_index.scss create mode 100644 ui_framework/src/global_styling/reset/_index.scss rename ui_framework/{components/_common_styles.scss => src/global_styling/reset/_reset.scss} (100%) rename ui_framework/{doc_site/src/views/button/button_small.js => src/global_styling/utilities/_index.scss} (100%) create mode 100644 ui_framework/src/global_styling/variables/_animations.scss create mode 100644 ui_framework/src/global_styling/variables/_borders.scss create mode 100644 ui_framework/src/global_styling/variables/_colors.scss create mode 100644 ui_framework/src/global_styling/variables/_font.scss create mode 100644 ui_framework/src/global_styling/variables/_form.scss create mode 100644 ui_framework/src/global_styling/variables/_index.scss create mode 100644 ui_framework/src/global_styling/variables/_shadows.scss create mode 100644 ui_framework/src/global_styling/variables/_timing.scss create mode 100644 ui_framework/src/global_styling/variables/_tool_bar.scss create mode 100644 ui_framework/src/global_styling/variables/_z_index.scss create mode 100644 ui_framework/src/index.scss rename ui_framework/{ => src}/services/accessibility/accessible_click_keys.js (100%) rename ui_framework/{ => src}/services/accessibility/combo_box_key_codes.js (100%) rename ui_framework/{ => src}/services/accessibility/index.js (100%) rename ui_framework/{ => src}/services/alignment.js (100%) create mode 100644 ui_framework/src/services/index.js rename ui_framework/{ => src}/services/key_codes.js (100%) rename ui_framework/{ => src}/services/sort/index.js (100%) rename ui_framework/{ => src}/services/sort/sortable_properties.js (100%) rename ui_framework/{ => src}/services/sort/sortable_properties.test.js (99%) rename ui_framework/{ => src}/test/required_props.js (100%) create mode 100644 ui_framework/src/themes/light_theme/_index.scss diff --git a/.gitignore b/.gitignore index b04c40f74d13a..fbd0bc3f495b5 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,4 @@ selenium ui_framework/doc_site/build !ui_framework/doc_site/build/index.html yarn.lock +.yo-rc.json diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md index a71ad9cce0183..f9108ba16797b 100644 --- a/STYLEGUIDE.md +++ b/STYLEGUIDE.md @@ -7,6 +7,7 @@ recommended for the development of all Kibana plugins. - [Angular](style_guides/angular_style_guide.md) - [React](style_guides/react_style_guide.md) - [CSS](style_guides/css_style_guide.md) +- [SCSS](style_guides/scss_style_guide.md) - [HTML](style_guides/html_style_guide.md) - [API](style_guides/api_style_guide.md) - [Architecture](style_guides/architecture_style_guide.md) diff --git a/package.json b/package.json index e59c434260f30..d074463c82f89 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,9 @@ "mocha": "echo 'use `node scripts/mocha`' && false", "sterilize": "grunt sterilize", "uiFramework:start": "grunt uiFramework:start", - "uiFramework:build": "grunt uiFramework:build" + "uiFramework:build": "grunt uiFramework:build", + "uiFramework:createComponent": "yo ./ui_framework/generator-kui/app/component.js", + "uiFramework:documentComponent": "yo ./ui_framework/generator-kui/app/documentation.js" }, "repository": { "type": "git", @@ -208,6 +210,7 @@ "angular-mocks": "1.4.7", "babel-eslint": "7.2.3", "chai": "3.5.0", + "chalk": "2.0.1", "chance": "1.0.6", "cheerio": "0.22.0", "chokidar": "1.6.0", @@ -275,7 +278,9 @@ "supertest": "3.0.0", "supertest-as-promised": "2.0.2", "tree-kill": "1.1.0", - "webpack-dev-server": "1.14.1" + "webpack-dev-server": "1.14.1", + "yeoman-generator": "1.1.1", + "yo": "2.0.0" }, "engines": { "node": "6.11.1", diff --git a/src/jest/config.json b/src/jest/config.json index f5b7c1260fc33..42fe433eb440a 100644 --- a/src/jest/config.json +++ b/src/jest/config.json @@ -5,15 +5,16 @@ "/ui_framework/" ], "collectCoverageFrom": [ - "ui_framework/services/**/*.js", - "!ui_framework/services/index.js", - "!ui_framework/services/**/*/index.js", - "ui_framework/components/**/*.js", - "!ui_framework/components/index.js", - "!ui_framework/components/**/*/index.js" + "ui_framework/src/components/**/*.js", + "!ui_framework/src/components/index.js", + "!ui_framework/src/components/**/*/index.js", + "ui_framework/src/services/**/*.js", + "!ui_framework/src/services/index.js", + "!ui_framework/src/services/**/*/index.js" ], "moduleNameMapper": { "^ui_framework/components": "/ui_framework/components", + "^ui_framework/services": "/ui_framework/services", "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/src/jest/file_mock.js", "\\.(css|less|scss)$": "/src/jest/style_mock.js" }, @@ -29,7 +30,9 @@ "**/*.test.js" ], "testPathIgnorePatterns": [ - "[/\\\\]ui_framework[/\\\\](dist|doc_site|jest)[/\\\\]" + "/ui_framework/dist/", + "/ui_framework/doc_site/", + "/ui_framework/generator-kui/" ], "transform": { "^.+\\.js$": "/src/jest/babelTransform.js" diff --git a/src/ui/public/modals/confirm_modal.js b/src/ui/public/modals/confirm_modal.js index 3e64631e2933c..e2dd943c5ef79 100644 --- a/src/ui/public/modals/confirm_modal.js +++ b/src/ui/public/modals/confirm_modal.js @@ -6,7 +6,10 @@ import { ModalOverlay } from './modal_overlay'; const module = uiModules.get('kibana'); -import { CONFIRM_BUTTON, CANCEL_BUTTON } from 'ui_framework/components/modal/confirm_modal'; +import { + KUI_MODAL_CONFIRM_BUTTON as CONFIRM_BUTTON, + KUI_MODAL_CANCEL_BUTTON as CANCEL_BUTTON, +} from 'ui_framework/components'; export const ConfirmationButtonTypes = { CONFIRM: CONFIRM_BUTTON, diff --git a/style_guides/css_style_guide.md b/style_guides/css_style_guide.md index 9c4cd6799a0cb..4d8872c0bbadb 100644 --- a/style_guides/css_style_guide.md +++ b/style_guides/css_style_guide.md @@ -1,6 +1,22 @@ # CSS Style Guide +## Original style guide + +Our style guide is an extension of [CSS Guidelines by Harry Roberts](https://cssguidelin.es/). The rules we especially focus on are: + +* [Multiple files](https://cssguidelin.es/#multiple-files) +* [Indenting](https://cssguidelin.es/#indenting) +* [Commenting](https://cssguidelin.es/#commenting) +* [Naming conventions](https://cssguidelin.es/#naming-conventions) (see "Naming convention", below, for exceptions) +* [CSS selectors](https://cssguidelin.es/#css-selectors) +* [Specificity](https://cssguidelin.es/#specificity) +* [Architectural principles](https://cssguidelin.es/#architectural-principles) + +Please see the [SCSS Style Guide](scss_style_guide.md) for additional rules pertaining to SCSS. + +## Contents + - [CSS Style Guide](#css-style-guide) - [Selecting elements](#selecting-elements) - [Using the preprocessor](#using-the-preprocessor) diff --git a/style_guides/scss_style_guide.md b/style_guides/scss_style_guide.md new file mode 100644 index 0000000000000..9d27e27fa6c33 --- /dev/null +++ b/style_guides/scss_style_guide.md @@ -0,0 +1,16 @@ + +# SCSS Style Guide + +## Original style guide + +Our style guide is an extension of [Sass Guidelines by Hugo Giraudel](https://sass-guidelin.es/). The rules we especially focus on are: + +* [Syntax & formatting](https://sass-guidelin.es/#syntax--formatting) (exceptions below) +* [Naming conventions](https://sass-guidelin.es/#naming-conventions) (see the [CSS Style Guide](css_style_guide.md) for infomation on exceptions) +* [Variables](https://sass-guidelin.es/#variables) +* [Mixins](https://sass-guidelin.es/#mixins) + +## Syntax and formatting + +The Sass Guidelines site recommends using RBG and HSL values to format colors, but we're using +hex values. \ No newline at end of file diff --git a/tasks/config/copy.js b/tasks/config/copy.js index f93f7fa49f479..9b0e24e5dcba7 100644 --- a/tasks/config/copy.js +++ b/tasks/config/copy.js @@ -18,6 +18,7 @@ module.exports = function () { 'ui_framework/components/**', 'ui_framework/services/**', 'ui_framework/dist/**', + 'ui_framework/src/**', 'webpackShims/**', 'config/kibana.yml', ], diff --git a/tasks/config/eslint.js b/tasks/config/eslint.js index 71e84555363f9..0f8f9d5518525 100644 --- a/tasks/config/eslint.js +++ b/tasks/config/eslint.js @@ -9,8 +9,9 @@ export default grunt => ({ 'scripts', 'tasks', 'test', - 'ui_framework/components', - 'ui_framework/doc_site', + 'ui_framework/src', + 'ui_framework/doc_site/src', + 'ui_framework/generator_kui', 'utilities', 'webpackShims', ], diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js index cb686f3beb010..49e0105fab12b 100644 --- a/tasks/ui_framework.js +++ b/tasks/ui_framework.js @@ -83,7 +83,7 @@ module.exports = function (grunt) { } function uiFrameworkCompile() { - const src = 'ui_framework/components/index.scss'; + const src = 'ui_framework/src/index.scss'; const dest = 'ui_framework/dist/ui_framework.css'; return new Promise(resolve => { @@ -130,7 +130,7 @@ module.exports = function (grunt) { return new Promise(() => { debouncedCompile(); - chokidar.watch('ui_framework/components', { ignoreInitial: true }).on('all', (event, path) => { + chokidar.watch('ui_framework/src', { ignoreInitial: true }).on('all', (event, path) => { grunt.log.writeln(event, path); debouncedCompile(); }); diff --git a/ui_framework/README.md b/ui_framework/README.md index 61bb97d16ba56..b7c7de51fff00 100644 --- a/ui_framework/README.md +++ b/ui_framework/README.md @@ -21,48 +21,91 @@ fully-tested the code is. See the documentation in [`scripts/jest.js`](../scripts/jest.js) for more options. -### React components - -Here are the components you can import from the Framework: - -```javascript -import { - KuiButton, - KuiButtonGroup, - KuiButtonIcon, -} from '../path/to/ui_framework/components'; -``` - ## Creating components There are four steps to creating a new component: -1. Create the SCSS for the component in `ui_framework/components`. +1. Create the SCSS for the component in `ui_framework/src/components`. 2. Create the React portion of the component. -3. Document it with examples in `ui_framework/doc_site`. -4. Write tests. +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. -### Create component SCSS +### Manually -1. Create a directory for your component in `ui_framework/components`. +#### 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/components/index.scss`. +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 +#### 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/components/index.js`. +3. Re-export these components from `ui_framework/src/components/index.js`. This makes your React component available for import into Kibana. -### Document the component with examples +#### 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. @@ -80,15 +123,22 @@ complex they should be. In general, your examples should demonstrate: content. * The various states of the component, e.g. disabled, selected, empty of content, error state. -### Test the component +## Creating documentation -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. +You can use the same Yeoman generator referenced above to create documentation. -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`. +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 @@ -101,7 +151,8 @@ 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). +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 diff --git a/ui_framework/components/_variables.scss b/ui_framework/components/_variables.scss deleted file mode 100644 index 80e723d2a1a37..0000000000000 --- a/ui_framework/components/_variables.scss +++ /dev/null @@ -1,112 +0,0 @@ -// -------------------------------------------------------------------------------------- -// KUI global variables -// -------------------------------------------------------------------------------------- -// This file contains all global variables available within kui. Every variable in this -// document should be prefixed with $global. This lets us know where the variable is -// coming from when looking inside the individual component files. Any component local -// variables should be declared at the top of those documents prefixed with $componentName. - - -// True colors - -$globalColorBlue: #0079a5; -$globalColorTeal: #00A69B; -$globalColorRed: #A30000; -$globalColorLightestGray: #F5F5F5; -$globalColorLightGray: #D9D9D9; -$globalColorMediumGray: #999; -$globalColorDarkGray: #666; -$globalColorDarkestGray: #3F3F3F; -$globalColorBlack: #000; -$globalColorWhite: #FFF; - - -// Normal colors - -$globalTextColor: #2d2d2d; -$globalLinkColor: $globalColorBlue; -$globalLinkColor-isHover: darken($globalLinkColor, 10%); -$globalInputTextColor: $globalTextColor; -$globalInputBackgroundColor: $globalColorWhite; -$globalInputBorderColor: $globalColorLightGray; - - -// Animations - -$globalAnimSlightBounce: cubic-bezier(0.34,1.61,0.7,1); -$globalAnimSlightResistance: cubic-bezier(0.694, 0.0482, 0.335, 1); -$globalAnimSpeedVeryFast: 90ms; -$globalAnimSpeedFast: 150ms; -$globalAnimSpeedNormal: 250ms; -$globalAnimSpeedSlow: 350ms; -$globalAnimSpeedVerySlow: 500ms; - - -// Dark theme colors - -$globalTextColor--darkTheme: #cecece; -$globalBackgroundColor--darkTheme: #777777; -$globalLinkColor--darkTheme: #b7e2ea; -$globalLinkColor-isHover--darkTheme: #def2f6; -$globalInputTextColor--darkTheme: $globalTextColor--darkTheme; -$globalInputBackgroundColor--darkTheme: #444444; -$globalInputBorderColor--darkTheme: $globalInputBackgroundColor--darkTheme; - -// Font - -$globalFontFamily: "Open Sans", Helvetica, Arial, sans-serif; -$globalFontSize: 14px; -$globalLineHeight: 1.5; -$globalSubTextFontSize: 12px; -$globalTitleFontSize: 18px; -$globalFontWeightRegular: 400; -$globalFontWeightBold: 700; - -// Colors - -$globalInfoColor: #3fa8c7; -$globalInactiveColor: #c3c3c3; -$globalSuccessColor: #417505; -$globalWarningColor: #ec9800; -$globalDangerColor: $globalColorRed; -$globalFocusColor: $globalColorBlue; -$globalFocusDangerColor: #ff523c; -$globalFocusWarningColor: #ffa500; -$globalFocusBackgroundColor: #ffffff; -$globalFontColor: #191E23; -$globalSubduedTextColor: $globalColorDarkGray; -$globalLinkHoverColor: #006E8A; -$globalSelectedBorderColor: $globalColorBlue; -$globalDangerBorderColor: $globalDangerColor; -$globalFormControlBorderColor: #DEDEDE; - -// Borders - -$globalBorderColor: $globalColorLightGray; -$globalBorderRadius: 4px; -$globalBorderThick: 2px solid $globalBorderColor; -$globalBorderThin: 1px solid $globalBorderColor; - -// Shadows - -$globalBoxShadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); - -// Timing - -$globalInputTransitionTiming: 0.1s linear; - -// Bar - -$toolBarHeight: 50px; -$toolBarPadding: 10px; -$toolBarSectionSpacing: 50px; -$toolBarItsemSpacing: 10px; - -// Form - -$globalFormControlHorizontalPadding: 12px; -$globalFormControlPadding: 3px $globalFormControlHorizontalPadding 4px; -$globalFormInputHeight: 30px; -$globalFormFieldDefaultWidth: 180px; -$globalFormFieldSmallWidth: 60px; -$globalFormFieldLargeWidth: 400px; diff --git a/ui_framework/components/accessibility/_index.scss b/ui_framework/components/accessibility/_index.scss deleted file mode 100644 index 37ec009af1e99..0000000000000 --- a/ui_framework/components/accessibility/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import "./_screen_reader"; diff --git a/ui_framework/components/index.js b/ui_framework/components/index.js index 51f621c4b5da0..aa94edb4a57f0 100644 --- a/ui_framework/components/index.js +++ b/ui_framework/components/index.js @@ -1,123 +1 @@ -export { KuiActionItem } from './action_item'; - -export { - KuiKeyboardAccessible, - KuiScreenReaderOnly, -} from './accessibility'; - -export { - KuiBar, - KuiBarSection, -} from './bar'; - -export { - KuiButton, - KuiButtonGroup, - KuiButtonIcon, - KuiLinkButton, - KuiSubmitButton, -} from './button'; - -export { - KuiCard, - KuiCardDescriptionText, - KuiCardDescriptionTitle, - KuiCardDescription, - KuiCardFooter, - KuiCardGroup, -} from './card'; - -export { - KuiColorPicker, -} from './color_picker'; - -export { - KuiCollapseButton, -} from './collapse_button'; - -export { - KuiEmptyTablePrompt, - KuiEmptyTablePromptMessage, - KuiEmptyTablePromptPanel, -} from './empty_table_prompt'; - -export { - KuiEvent, - KuiEventSymbol, - KuiEventBody, - KuiEventBodyMessage, - KuiEventBodyMetadata, -} from './event'; - -export { - KuiFieldGroup, - KuiFieldGroupSection, -} from './form_layout'; - -export { - KuiGallery, - KuiGalleryButton, - KuiGalleryButtonIcon, - KuiGalleryButtonImage, - KuiGalleryButtonLabel, -} from './gallery'; - -export { - KuiHeaderBar, - KuiHeaderBarSection, -} from './header_bar'; - -export { KuiInfoButton } from './info_button'; - -export { - KuiLocalNav, - KuiLocalNavRow, - KuiLocalNavRowSection, - KuiLocalTab, - KuiLocalTabs, - KuiLocalTitle, -} from './local_nav'; - -export { - KuiMenu, - KuiMenuItem, -} from './menu'; - - -export * from './modal'; - -export { - KuiPager, - KuiPagerButtonGroup, -} from './pager'; - -export { - KuiPopover, -} from './popover'; - -export { - KuiTabs, - KuiTab -} from './tabs'; - -export { - KuiTable, - KuiControlledTable, - KuiTableHeaderCell, - KuiTableRow, - KuiTableRowCell, - KuiTableInfo, - KuiTableRowCheckBoxCell, - KuiTableHeaderCheckBoxCell, - KuiTableHeader, - KuiTableBody, -} from './table'; - -export { - KuiToolBar, - KuiToolBarSearchBox, - KuiToolBarFooter, - KuiToolBarSection, - KuiToolBarFooterSection, - KuiToolBarText -} from './tool_bar'; +export * from '../src/components'; diff --git a/ui_framework/doc_site/build/index.html b/ui_framework/doc_site/build/index.html index 3717c95289f77..aed4fcf3ba4e3 100644 --- a/ui_framework/doc_site/build/index.html +++ b/ui_framework/doc_site/build/index.html @@ -6,7 +6,7 @@ - +
diff --git a/ui_framework/doc_site/src/components/guide/_guide.scss b/ui_framework/doc_site/src/components/guide/_guide.scss new file mode 100644 index 0000000000000..fa35e61ca0a9a --- /dev/null +++ b/ui_framework/doc_site/src/components/guide/_guide.scss @@ -0,0 +1,103 @@ +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-right $guideCodeViewerTransition, + opacity $guideCodeViewerTransition; + + &.is-code-viewer-open { + padding-right: $guideCodeViewerWidth; + + @include whenNarrowerThan($guideNormalBreakpoint) { + padding-right: $guideCodeViewerSmallWidth; + } + } + + .is-guide-nav-open + & { + opacity: 0.7; + } +} + +@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/ui_framework/doc_site/src/components/guide_components.scss b/ui_framework/doc_site/src/components/guide_components.scss index 816241a05f5fa..848ed12549e47 100644 --- a/ui_framework/doc_site/src/components/guide_components.scss +++ b/ui_framework/doc_site/src/components/guide_components.scss @@ -1,5 +1,54 @@ $guideVerticalRhythm: 20px; +$guideLineHeight: 24px; +$guideNavHeight: 60px; +$guideSideNavWidth: 400px; +$guideSideNavSmallWidth: 220px; +$guideCodeViewerWidth: 660px; +$guideCodeViewerSmallWidth: 520px; +$guideCodeViewerTransition: 0.2s 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"; diff --git a/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss b/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss index 73dd4cdd4308a..f5723dc21364d 100644 --- a/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss +++ b/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss @@ -151,7 +151,7 @@ .guideNavPaginationButtons { position: absolute; - top: 10px; + top: 20px; right: 10px; } diff --git a/ui_framework/doc_site/src/components/guide_nav/guide_nav.js b/ui_framework/doc_site/src/components/guide_nav/guide_nav.js index 87c938b3554cf..da8c0f7c56f35 100644 --- a/ui_framework/doc_site/src/components/guide_nav/guide_nav.js +++ b/ui_framework/doc_site/src/components/guide_nav/guide_nav.js @@ -122,6 +122,10 @@ export class GuideNav extends Component { 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}
); }); diff --git a/ui_framework/doc_site/src/components/guide_page/_guide_page.scss b/ui_framework/doc_site/src/components/guide_page/_guide_page.scss index 5cbca6b531dd0..3c3249a940109 100644 --- a/ui_framework/doc_site/src/components/guide_page/_guide_page.scss +++ b/ui_framework/doc_site/src/components/guide_page/_guide_page.scss @@ -1,5 +1,3 @@ -@import "../../variables"; - .guidePage { display: flex; flex: 1 0 auto; diff --git a/ui_framework/doc_site/src/main.scss b/ui_framework/doc_site/src/main.scss index c16ec56e78238..f1707487acfbf 100644 --- a/ui_framework/doc_site/src/main.scss +++ b/ui_framework/doc_site/src/main.scss @@ -1,116 +1,2 @@ @import "../../dist/ui_framework.css"; -@import "./variables"; @import "./components/guide_components"; - -* { - box-sizing: border-box; -} - -html, -body { - height: 100%; -} - -/** - * 1. Insane line-height makes it easier to notice when components are relying - * on styles inherited from body. - */ -body { - background-color: #000000; - line-height: 40px; /* 1 */ - 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-right $guideCodeViewerTransition, - opacity $guideCodeViewerTransition; - - &.is-code-viewer-open { - padding-right: $guideCodeViewerWidth; - - @include whenNarrowerThan($guideNormalBreakpoint) { - padding-right: $guideCodeViewerSmallWidth; - } - } - - .is-guide-nav-open + & { - opacity: 0.7; - } -} - -@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/ui_framework/doc_site/src/variables.scss b/ui_framework/doc_site/src/variables.scss deleted file mode 100644 index cbeac0fcfadca..0000000000000 --- a/ui_framework/doc_site/src/variables.scss +++ /dev/null @@ -1,47 +0,0 @@ -$guideLineHeight: 24px; -$guideNavHeight: 60px; -$guideSideNavWidth: 400px; -$guideSideNavSmallWidth: 220px; -$guideCodeViewerWidth: 660px; -$guideCodeViewerSmallWidth: 520px; -$guideCodeViewerTransition: 0.2s 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; - } -} diff --git a/ui_framework/doc_site/src/views/button/button_basic.js b/ui_framework/doc_site/src/views/button/button_basic.js index 7ed1010895f1d..73e8885556abc 100644 --- a/ui_framework/doc_site/src/views/button/button_basic.js +++ b/ui_framework/doc_site/src/views/button/button_basic.js @@ -13,6 +13,7 @@ export default () => ( Basic button +

( Danger button +

( Button element -   +
+
{ e.preventDefault(); @@ -24,6 +25,7 @@ export default () => (
+
{ e.preventDefault(); @@ -35,7 +37,7 @@ export default () => (
-   +
( Anchor element -   +
+
( - - - This example verifies that Buttons are legible against the ToolBar's background. - - - - - - - ( Hollow button +

+

( Primary button +

( Secondary button +

( Warning button +

( Create +

( Delete +

( Previous +

( Next +

( Loading +

( -
- - Basic button - - - - Basic button, disabled - - - - Primary button - - - - Primary button, disabled - - - - Secondary button - - - - Secondary button, disabled - - - - Danger button - - - - Danger button, disabled - - - - Warning button - - - - Warning button, disabled - -
-); diff --git a/ui_framework/doc_site/src/views/color_picker/color_picker.js b/ui_framework/doc_site/src/views/color_picker/color_picker.js index 1e4285b2c5365..28521e851abae 100644 --- a/ui_framework/doc_site/src/views/color_picker/color_picker.js +++ b/ui_framework/doc_site/src/views/color_picker/color_picker.js @@ -1,6 +1,6 @@ import React from 'react'; -import { KuiColorPicker } from '../../../../components/index'; +import { KuiColorPicker } from '../../../../components'; export class ColorPicker extends React.Component { constructor(props) { diff --git a/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js b/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js index 313cc0d62f4a6..d675c7ad8ab8a 100644 --- a/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js +++ b/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js @@ -5,7 +5,7 @@ import { KuiFieldGroup, KuiFieldGroupSection, KuiKeyboardAccessible, -} from '../../../../components/index'; +} from '../../../../components'; export class ColorPickerLabelAndClear extends React.Component { constructor(props) { diff --git a/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js b/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js index 931b7dbedc67c..4e6b4f9877cf3 100644 --- a/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js +++ b/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js @@ -4,7 +4,7 @@ import { KuiColorPicker, KuiFieldGroup, KuiFieldGroupSection, -} from '../../../../components/index'; +} from '../../../../components'; export class ColorPickerNoColorLabel extends React.Component { constructor(props) { diff --git a/ui_framework/doc_site/src/views/gallery/gallery.js b/ui_framework/doc_site/src/views/gallery/gallery.js index 5c13f6a4775c1..4678d2583ec29 100644 --- a/ui_framework/doc_site/src/views/gallery/gallery.js +++ b/ui_framework/doc_site/src/views/gallery/gallery.js @@ -20,11 +20,11 @@ export default () => { return (
-

+

Some items

- + @@ -70,11 +70,11 @@ export default () => {
-
+
Some more items
- + diff --git a/ui_framework/doc_site/src/views/modal/confirm_modal_example.js b/ui_framework/doc_site/src/views/modal/confirm_modal_example.js index 4dcdb7fd6c7ef..8959fd60b34c8 100644 --- a/ui_framework/doc_site/src/views/modal/confirm_modal_example.js +++ b/ui_framework/doc_site/src/views/modal/confirm_modal_example.js @@ -4,7 +4,7 @@ import { KuiConfirmModal, KuiModalOverlay, KuiButton -} from '../../../../components/index'; +} from '../../../../components'; export class ConfirmModalExample extends React.Component { constructor(props) { diff --git a/ui_framework/doc_site/src/views/modal/modal_example.js b/ui_framework/doc_site/src/views/modal/modal_example.js index 0c938c1ae60bc..411606adec4d7 100644 --- a/ui_framework/doc_site/src/views/modal/modal_example.js +++ b/ui_framework/doc_site/src/views/modal/modal_example.js @@ -9,17 +9,14 @@ import { GuideSectionTypes, } from '../../components'; -import { - KuiConfirmModal, -} from '../../../../components'; +import { StaticConfirmModal } from './static'; +const staticConfirmModalSource = require('!!raw!./static'); +const staticConfirmModalHtml = renderToHtml(StaticConfirmModal); import { ConfirmModalExample } from './confirm_modal_example'; const showConfirmModalSource = require('!!raw!./confirm_modal_example'); const showConfirmModalHtml = renderToHtml(ConfirmModalExample); -const kuiConfirmModalSource = require('!!raw!../../../../components/modal/confirm_modal'); -const kuiConfirmModalHtml = renderToHtml(KuiConfirmModal); - export default props => ( @@ -27,21 +24,14 @@ export default props => ( title="Confirmation Modal" source={[{ type: GuideSectionTypes.JS, - code: kuiConfirmModalSource, + code: staticConfirmModalSource, }, { type: GuideSectionTypes.HTML, - code: kuiConfirmModalHtml, + code: staticConfirmModalHtml, }]} > - {}} - onConfirm={() => {}} - confirmButtonText="Confirm" - cancelButtonText="Cancel" - message="This is a confirmation modal" - title="Confirm Modal Title" - /> + diff --git a/ui_framework/doc_site/src/views/modal/static.js b/ui_framework/doc_site/src/views/modal/static.js new file mode 100644 index 0000000000000..f2b14bb18e83d --- /dev/null +++ b/ui_framework/doc_site/src/views/modal/static.js @@ -0,0 +1,16 @@ +import React from 'react'; + +import { + KuiConfirmModal, +} from '../../../../components'; + +export const StaticConfirmModal = () => ( + {}} + onConfirm={() => {}} + confirmButtonText="Confirm" + cancelButtonText="Cancel" + message="This is a confirmation modal" + title="Confirm Modal Title" + /> +); diff --git a/ui_framework/generator-kui/app/component.js b/ui_framework/generator-kui/app/component.js new file mode 100644 index 0000000000000..420d995585308 --- /dev/null +++ b/ui_framework/generator-kui/app/component.js @@ -0,0 +1,28 @@ +const Generator = require('yeoman-generator'); + +const componentGenerator = require.resolve('../component/index.js'); + +module.exports = class extends Generator { + prompting() { + return this.prompt([{ + message: 'What do you want to create?', + name: 'fileType', + type: 'list', + choices: [{ + name: 'Stateless function', + value: 'function', + }, { + name: 'Component class', + value: 'component', + }], + }]).then(answers => { + this.config = answers; + }); + } + + writing() { + this.composeWith(componentGenerator, { + fileType: this.config.fileType, + }); + } +} diff --git a/ui_framework/generator-kui/app/documentation.js b/ui_framework/generator-kui/app/documentation.js new file mode 100644 index 0000000000000..9be00373a0ff2 --- /dev/null +++ b/ui_framework/generator-kui/app/documentation.js @@ -0,0 +1,31 @@ +const Generator = require('yeoman-generator'); + +const documentationGenerator = require.resolve('../documentation/index.js'); + +module.exports = class extends Generator { + prompting() { + return this.prompt([{ + message: 'What do you want to create?', + name: 'fileType', + type: 'list', + choices: [{ + name: 'Page', + value: 'documentation', + }, { + name: 'Page demo', + value: 'demo', + }, { + name: 'Sandbox', + value: 'sandbox', + }], + }]).then(answers => { + this.config = answers; + }); + } + + writing() { + this.composeWith(documentationGenerator, { + fileType: this.config.fileType, + }); + } +} diff --git a/ui_framework/generator-kui/component/index.js b/ui_framework/generator-kui/component/index.js new file mode 100644 index 0000000000000..15ff6cc67a08d --- /dev/null +++ b/ui_framework/generator-kui/component/index.js @@ -0,0 +1,141 @@ +const chalk = require('chalk'); +const Generator = require('yeoman-generator'); +const utils = require('../utils'); + +module.exports = class extends Generator { + constructor(args, options) { + super(args, options); + + this.fileType = options.fileType; + } + + prompting() { + return this.prompt([{ + message: 'What\'s the name of this component? Use snake_case, please.', + name: 'name', + type: 'input', + }, { + message: `Where do you want to create this component's files?`, + type: 'input', + name: 'path', + default: 'ui_framework/src/components', + store: true, + }, { + message: 'Does it need its own directory?', + name: 'shouldMakeDirectory', + type: 'confirm', + default: true, + }]).then(answers => { + this.config = answers; + }); + } + + writing() { + const config = this.config; + + const writeComponent = isStatelessFunction => { + const componentName = utils.makeComponentName(config.name); + const cssClassName = utils.lowerCaseFirstLetter(componentName); + const fileName = config.name; + + const path = utils.addDirectoryToPath( + config.path, fileName, config.shouldMakeDirectory); + + const vars = config.vars = { + componentName, + cssClassName, + fileName, + }; + + const componentPath = config.componentPath = `${path}/${fileName}.js`; + const testPath = config.testPath = `${path}/${fileName}.test.js`; + const stylesPath = config.stylesPath = `${path}/_${fileName}.scss`; + config.stylesImportPath = `./_${fileName}.scss`; + + // If it needs its own directory then it will need a root index file too. + if (this.config.shouldMakeDirectory) { + this.fs.copyTpl( + this.templatePath('_index.scss'), + this.destinationPath(`${path}/_index.scss`), + vars + ); + + this.fs.copyTpl( + this.templatePath('index.js'), + this.destinationPath(`${path}/index.js`), + vars + ); + } + + // Create component file. + this.fs.copyTpl( + isStatelessFunction ? + this.templatePath('stateless_function.js') : + this.templatePath('component.js'), + this.destinationPath(componentPath), + vars + ); + + // Create component test file. + this.fs.copyTpl( + this.templatePath('test.js'), + this.destinationPath(testPath), + vars + ); + + // Create component styles file. + this.fs.copyTpl( + this.templatePath('_component.scss'), + this.destinationPath(stylesPath), + vars + ); + }; + + switch (this.fileType) { + case 'component': + writeComponent(); + break; + + case 'function': + writeComponent(true); + break; + } + } + + end() { + const showImportComponentSnippet = () => { + const componentName = this.config.vars.componentName; + const componentPath = this.config.componentPath; + + this.log(chalk.white(`\n// Export component (e.. from component's index.js).`)); + this.log( + `${chalk.magenta('export')} {\n` + + ` ${componentName},\n` + + `} ${chalk.magenta('from')} ${chalk.cyan(`'./${this.config.name}'`)};` + ); + + this.log(chalk.white('\n// Import styles.')); + this.log( + `${chalk.magenta('@import')} ${chalk.cyan(`'${this.config.name}'`)};` + ); + + this.log(chalk.white('\n// Import component styles into the root index.scss.')); + this.log( + `${chalk.magenta('@import')} ${chalk.cyan(`'./${this.config.name}/index'`)};` + ); + }; + + this.log('------------------------------------------------'); + this.log(chalk.bold('Handy snippets:')); + switch (this.fileType) { + case 'component': + showImportComponentSnippet(); + break; + + case 'function': + showImportComponentSnippet(); + break; + } + this.log('------------------------------------------------'); + } +} diff --git a/ui_framework/generator-kui/component/templates/_component.scss b/ui_framework/generator-kui/component/templates/_component.scss new file mode 100644 index 0000000000000..668cabce61327 --- /dev/null +++ b/ui_framework/generator-kui/component/templates/_component.scss @@ -0,0 +1,3 @@ +.<%= cssClassName %> { + +} diff --git a/ui_framework/generator-kui/component/templates/_index.scss b/ui_framework/generator-kui/component/templates/_index.scss new file mode 100644 index 0000000000000..088dee9874946 --- /dev/null +++ b/ui_framework/generator-kui/component/templates/_index.scss @@ -0,0 +1 @@ +@import '<%= fileName %>'; diff --git a/ui_framework/generator-kui/component/templates/component.js b/ui_framework/generator-kui/component/templates/component.js new file mode 100644 index 0000000000000..1bdd9813ae7d0 --- /dev/null +++ b/ui_framework/generator-kui/component/templates/component.js @@ -0,0 +1,35 @@ +import React, { + Component, +} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export class <%= componentName %> extends Component { + static propTypes = { + children: PropTypes.node, + className: PropTypes.string, + } + + constructor(props) { + super(props); + } + + render() { + const { + children, + className, + ...rest, + } = this.props; + + const classes = classNames('<%= cssClassName %>', className); + + return ( +
+ {children} +
+ ); + } +} diff --git a/ui_framework/generator-kui/component/templates/index.js b/ui_framework/generator-kui/component/templates/index.js new file mode 100644 index 0000000000000..0cd8d70f3e13d --- /dev/null +++ b/ui_framework/generator-kui/component/templates/index.js @@ -0,0 +1 @@ +export { <%= componentName %> } from './<%= fileName %>'; diff --git a/ui_framework/generator-kui/component/templates/stateless_function.js b/ui_framework/generator-kui/component/templates/stateless_function.js new file mode 100644 index 0000000000000..f179e04e9cbf4 --- /dev/null +++ b/ui_framework/generator-kui/component/templates/stateless_function.js @@ -0,0 +1,21 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const <%= componentName %> = ({ children, className, ...rest }) => { + const classes = classNames('<%= cssClassName %>', className); + + return ( +
+ {children} +
+ ); +}; + +<%= componentName %>.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/ui_framework/generator-kui/component/templates/test.js b/ui_framework/generator-kui/component/templates/test.js new file mode 100644 index 0000000000000..aecd6497a73cb --- /dev/null +++ b/ui_framework/generator-kui/component/templates/test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { <%= componentName %> } from './<%= fileName %>'; + +describe('<%= componentName %>', () => { + test('is rendered', () => { + const component = render( + <<%= componentName %> { ...requiredProps } /> + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/ui_framework/generator-kui/documentation/index.js b/ui_framework/generator-kui/documentation/index.js new file mode 100644 index 0000000000000..ad675ef949d22 --- /dev/null +++ b/ui_framework/generator-kui/documentation/index.js @@ -0,0 +1,217 @@ +const chalk = require('chalk'); +const Generator = require('yeoman-generator'); +const utils = require('../utils'); + +const DOCUMENTATION_PAGE_PATH = 'ui_framework/doc_site/src/views'; + +module.exports = class extends Generator { + constructor(args, options) { + super(args, options); + + this.fileType = options.fileType; + } + + prompting() { + let prompts = [{ + message: 'What\'s the name of the component you\'re documenting? Use snake_case, please.', + name: 'name', + type: 'input', + store: true, + }]; + + if (this.fileType === 'demo') { + prompts.push({ + message: `What's the name of the directory this demo should go in? (Within ui_framework/doc_site/src/views). Use snake_case, please.`, + name: 'folderName', + type: 'input', + store: true, + default: answers => answers.name, + }); + + prompts.push({ + message: 'What would you like to name this demo? Use snake_case, please.', + name: 'demoName', + type: 'input', + store: true, + }); + } + + return this.prompt(prompts).then(answers => { + this.config = answers; + }); + } + + writing() { + const config = this.config; + + const writeDocumentationPage = () => { + const componentExampleName = utils.makeComponentName(config.name, false); + const componentExamplePrefix = utils.lowerCaseFirstLetter(componentExampleName); + const fileName = config.name; + + const path = DOCUMENTATION_PAGE_PATH; + + const vars = config.documentationVars = { + componentExampleName, + componentExamplePrefix, + fileName, + }; + + const documentationPagePath + = config.documentationPagePath + = `${path}/${config.name}/${config.name}_example.js`; + + this.fs.copyTpl( + this.templatePath('documentation_page.js'), + this.destinationPath(documentationPagePath), + vars + ); + }; + + const writeDocumentationPageDemo = (fileName, folderName) => { + const componentExampleName = utils.makeComponentName(fileName, false); + const componentExamplePrefix = utils.lowerCaseFirstLetter(componentExampleName); + const componentName = utils.makeComponentName(config.name); + + const path = DOCUMENTATION_PAGE_PATH; + + const vars = config.documentationVars = { + componentExampleName, + componentExamplePrefix, + componentName, + fileName, + }; + + const documentationPageDemoPath + = config.documentationPageDemoPath + = `${path}/${folderName}/${fileName}.js`; + + this.fs.copyTpl( + this.templatePath('documentation_page_demo.js'), + this.destinationPath(documentationPageDemoPath), + vars + ); + }; + + const writeSandbox = () => { + const fileName = config.name; + const componentExampleName = utils.makeComponentName(fileName, false); + + const path = DOCUMENTATION_PAGE_PATH; + + const vars = config.documentationVars = { + componentExampleName, + fileName, + }; + + const sandboxPath + = config.documentationPageDemoPath + = `${path}/${config.name}/${fileName}`; + + this.fs.copyTpl( + this.templatePath('documentation_sandbox.html'), + this.destinationPath(`${sandboxPath}_sandbox.html`) + ); + + this.fs.copyTpl( + this.templatePath('documentation_sandbox.js'), + this.destinationPath(`${sandboxPath}_sandbox.js`), + vars + ); + }; + + switch (this.fileType) { + case 'documentation': + writeDocumentationPage(); + writeDocumentationPageDemo(config.name, config.name); + break; + + case 'demo': + writeDocumentationPageDemo(config.demoName, config.folderName); + break; + + case 'sandbox': + writeSandbox(); + break; + } + } + + end() { + const showImportDemoSnippet = () => { + const { + componentExampleName, + componentExamplePrefix, + fileName, + } = this.config.documentationVars; + + this.log(chalk.white('\n// Import demo into example.')); + this.log( + `${chalk.magenta('import')} ${componentExampleName} from ${chalk.cyan(`'./${fileName}'`)};\n` + + `${chalk.magenta('const')} ${componentExamplePrefix}Source = require(${chalk.cyan(`'!!raw!./${fileName}'`)});\n` + + `${chalk.magenta('const')} ${componentExamplePrefix}Html = renderToHtml(${componentExampleName});` + ); + + this.log(chalk.white('\n// Render demo.')); + this.log( + `\n` + + ` \n` + + ` Description needed: how to use the ${componentExampleName} component.\n` + + ` \n` + + `\n` + + ` \n` + + ` <${componentExampleName} />\n` + + ` \n` + + `\n` + ); + }; + + const showImportRouteSnippet = (suffix, appendToRoute) => { + const { + componentExampleName, + fileName, + } = this.config.documentationVars; + + this.log(chalk.white('\n// Import example into routes.js.')); + this.log( + `${chalk.magenta('import')} ${componentExampleName}${suffix}\n` + + ` ${chalk.magenta('from')} ${chalk.cyan(`'../../views/${fileName}/${fileName}_${suffix.toLowerCase()}'`)};` + ); + + this.log(chalk.white('\n// Import route definition into routes.js.')); + this.log( + `{\n` + + ` name: ${chalk.cyan(`'${componentExampleName}${appendToRoute ? suffix : ''}'`)},\n` + + ` component: ${componentExampleName}${suffix},\n` + + ` hasReact: ${chalk.magenta('true')},\n` + + `}` + ); + } + + this.log('------------------------------------------------'); + this.log(chalk.bold('Import snippets:')); + + switch (this.fileType) { + case 'documentation': + showImportRouteSnippet('Example'); + break; + + case 'demo': + showImportDemoSnippet(); + break; + + case 'sandbox': + showImportRouteSnippet('Sandbox', true); + break; + } + this.log('------------------------------------------------'); + } +} diff --git a/ui_framework/generator-kui/documentation/templates/documentation_page.js b/ui_framework/generator-kui/documentation/templates/documentation_page.js new file mode 100644 index 0000000000000..6782b10b23a06 --- /dev/null +++ b/ui_framework/generator-kui/documentation/templates/documentation_page.js @@ -0,0 +1,38 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import <%= componentExampleName %> from './<%= fileName %>'; +const <%= componentExamplePrefix %>Source = require('!!raw!./<%= fileName %>'); +const <%= componentExamplePrefix %>Html = renderToHtml(<%= componentExampleName %>); + +export default props => ( + + Source, + }, { + type: GuideSectionTypes.HTML, + code: <%= componentExamplePrefix %>Html, + }]} + > + + Description needed: how to use the <%= componentExampleName %> component. + + + + <<%= componentExampleName %> /> + + + +); diff --git a/ui_framework/generator-kui/documentation/templates/documentation_page_demo.js b/ui_framework/generator-kui/documentation/templates/documentation_page_demo.js new file mode 100644 index 0000000000000..645f194bb3c7b --- /dev/null +++ b/ui_framework/generator-kui/documentation/templates/documentation_page_demo.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import { + <%= componentName %>, +} from '../../../../components'; + +export default () => ( + <<%= componentName %>> + + > +); diff --git a/ui_framework/generator-kui/documentation/templates/documentation_sandbox.html b/ui_framework/generator-kui/documentation/templates/documentation_sandbox.html new file mode 100644 index 0000000000000..2515d47beb72f --- /dev/null +++ b/ui_framework/generator-kui/documentation/templates/documentation_sandbox.html @@ -0,0 +1 @@ +

Do whatever you want here!

diff --git a/ui_framework/generator-kui/documentation/templates/documentation_sandbox.js b/ui_framework/generator-kui/documentation/templates/documentation_sandbox.js new file mode 100644 index 0000000000000..3edfa10665c65 --- /dev/null +++ b/ui_framework/generator-kui/documentation/templates/documentation_sandbox.js @@ -0,0 +1,27 @@ +import React from 'react'; + +import { + GuideDemo, + GuideSandbox, + GuideSandboxCodeToggle, + GuideSectionTypes, +} from '../../components'; + +const html = require('./<%= fileName %>_sandbox.html'); + +export default props => ( + + + + + +); diff --git a/ui_framework/generator-kui/utils.js b/ui_framework/generator-kui/utils.js new file mode 100644 index 0000000000000..8c563f8fd4a0d --- /dev/null +++ b/ui_framework/generator-kui/utils.js @@ -0,0 +1,35 @@ +function makeComponentName(str, usePrefix = true) { + const words = str.split('_'); + + const componentName = words.map(function(word) { + return upperCaseFirstLetter(word); + }).join(''); + + return `${usePrefix ? 'Kui' : ''}${componentName}`; +} + +function lowerCaseFirstLetter(str) { + return str.replace(/\w\S*/g, function(txt) { + return txt.charAt(0).toLowerCase() + txt.substr(1); + }); +} + +function upperCaseFirstLetter(str) { + return str.replace(/\w\S*/g, function(txt) { + return txt.charAt(0).toUpperCase() + txt.substr(1); + }); +} + +function addDirectoryToPath(path, dirName, shouldMakeDirectory) { + if (shouldMakeDirectory) { + return path + '/' + dirName; + } + return path; +} + +module.exports = { + makeComponentName: makeComponentName, + lowerCaseFirstLetter: lowerCaseFirstLetter, + upperCaseFirstLetter: upperCaseFirstLetter, + addDirectoryToPath: addDirectoryToPath, +}; diff --git a/ui_framework/services/index.js b/ui_framework/services/index.js index ba63715c0a268..921e494c1e642 100644 --- a/ui_framework/services/index.js +++ b/ui_framework/services/index.js @@ -1,11 +1 @@ -export { - accessibleClickKeys, - comboBoxKeyCodes, - ENTER_KEY, - SPACE_KEY, -} from './accessibility'; - -export { SortableProperties } from './sort'; -export { ESC_KEY_CODE } from './key_codes'; - -export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment'; +export * from '../src/services'; diff --git a/ui_framework/components/accessibility/__snapshots__/keyboard_accessible.test.js.snap b/ui_framework/src/components/accessibility/__snapshots__/keyboard_accessible.test.js.snap similarity index 100% rename from ui_framework/components/accessibility/__snapshots__/keyboard_accessible.test.js.snap rename to ui_framework/src/components/accessibility/__snapshots__/keyboard_accessible.test.js.snap diff --git a/ui_framework/components/accessibility/__snapshots__/screen_reader.test.js.snap b/ui_framework/src/components/accessibility/__snapshots__/screen_reader.test.js.snap similarity index 100% rename from ui_framework/components/accessibility/__snapshots__/screen_reader.test.js.snap rename to ui_framework/src/components/accessibility/__snapshots__/screen_reader.test.js.snap diff --git a/ui_framework/src/components/accessibility/_index.scss b/ui_framework/src/components/accessibility/_index.scss new file mode 100644 index 0000000000000..b4ff9d8c34343 --- /dev/null +++ b/ui_framework/src/components/accessibility/_index.scss @@ -0,0 +1 @@ +@import "screen_reader"; diff --git a/ui_framework/components/accessibility/_screen_reader.scss b/ui_framework/src/components/accessibility/_screen_reader.scss similarity index 100% rename from ui_framework/components/accessibility/_screen_reader.scss rename to ui_framework/src/components/accessibility/_screen_reader.scss diff --git a/ui_framework/components/accessibility/index.js b/ui_framework/src/components/accessibility/index.js similarity index 100% rename from ui_framework/components/accessibility/index.js rename to ui_framework/src/components/accessibility/index.js diff --git a/ui_framework/components/accessibility/keyboard_accessible.js b/ui_framework/src/components/accessibility/keyboard_accessible.js similarity index 100% rename from ui_framework/components/accessibility/keyboard_accessible.js rename to ui_framework/src/components/accessibility/keyboard_accessible.js diff --git a/ui_framework/components/accessibility/keyboard_accessible.test.js b/ui_framework/src/components/accessibility/keyboard_accessible.test.js similarity index 100% rename from ui_framework/components/accessibility/keyboard_accessible.test.js rename to ui_framework/src/components/accessibility/keyboard_accessible.test.js diff --git a/ui_framework/components/accessibility/screen_reader.js b/ui_framework/src/components/accessibility/screen_reader.js similarity index 100% rename from ui_framework/components/accessibility/screen_reader.js rename to ui_framework/src/components/accessibility/screen_reader.js diff --git a/ui_framework/components/accessibility/screen_reader.test.js b/ui_framework/src/components/accessibility/screen_reader.test.js similarity index 100% rename from ui_framework/components/accessibility/screen_reader.test.js rename to ui_framework/src/components/accessibility/screen_reader.test.js diff --git a/ui_framework/components/action_item/__snapshots__/action_item.test.js.snap b/ui_framework/src/components/action_item/__snapshots__/action_item.test.js.snap similarity index 100% rename from ui_framework/components/action_item/__snapshots__/action_item.test.js.snap rename to ui_framework/src/components/action_item/__snapshots__/action_item.test.js.snap diff --git a/ui_framework/components/action_item/_action_item.scss b/ui_framework/src/components/action_item/_action_item.scss similarity index 100% rename from ui_framework/components/action_item/_action_item.scss rename to ui_framework/src/components/action_item/_action_item.scss diff --git a/ui_framework/components/action_item/_index.scss b/ui_framework/src/components/action_item/_index.scss similarity index 100% rename from ui_framework/components/action_item/_index.scss rename to ui_framework/src/components/action_item/_index.scss diff --git a/ui_framework/components/action_item/action_item.js b/ui_framework/src/components/action_item/action_item.js similarity index 100% rename from ui_framework/components/action_item/action_item.js rename to ui_framework/src/components/action_item/action_item.js diff --git a/ui_framework/components/action_item/action_item.test.js b/ui_framework/src/components/action_item/action_item.test.js similarity index 100% rename from ui_framework/components/action_item/action_item.test.js rename to ui_framework/src/components/action_item/action_item.test.js diff --git a/ui_framework/components/action_item/index.js b/ui_framework/src/components/action_item/index.js similarity index 100% rename from ui_framework/components/action_item/index.js rename to ui_framework/src/components/action_item/index.js diff --git a/ui_framework/components/badge/_badge.scss b/ui_framework/src/components/badge/_badge.scss similarity index 100% rename from ui_framework/components/badge/_badge.scss rename to ui_framework/src/components/badge/_badge.scss diff --git a/ui_framework/components/badge/_index.scss b/ui_framework/src/components/badge/_index.scss similarity index 100% rename from ui_framework/components/badge/_index.scss rename to ui_framework/src/components/badge/_index.scss diff --git a/ui_framework/components/bar/__snapshots__/bar.test.js.snap b/ui_framework/src/components/bar/__snapshots__/bar.test.js.snap similarity index 100% rename from ui_framework/components/bar/__snapshots__/bar.test.js.snap rename to ui_framework/src/components/bar/__snapshots__/bar.test.js.snap diff --git a/ui_framework/components/bar/__snapshots__/bar_section.test.js.snap b/ui_framework/src/components/bar/__snapshots__/bar_section.test.js.snap similarity index 100% rename from ui_framework/components/bar/__snapshots__/bar_section.test.js.snap rename to ui_framework/src/components/bar/__snapshots__/bar_section.test.js.snap diff --git a/ui_framework/components/bar/_bar.scss b/ui_framework/src/components/bar/_bar.scss similarity index 100% rename from ui_framework/components/bar/_bar.scss rename to ui_framework/src/components/bar/_bar.scss diff --git a/ui_framework/components/bar/_bar_section.scss b/ui_framework/src/components/bar/_bar_section.scss similarity index 100% rename from ui_framework/components/bar/_bar_section.scss rename to ui_framework/src/components/bar/_bar_section.scss diff --git a/ui_framework/components/bar/_index.scss b/ui_framework/src/components/bar/_index.scss similarity index 100% rename from ui_framework/components/bar/_index.scss rename to ui_framework/src/components/bar/_index.scss diff --git a/ui_framework/components/bar/bar.js b/ui_framework/src/components/bar/bar.js similarity index 100% rename from ui_framework/components/bar/bar.js rename to ui_framework/src/components/bar/bar.js diff --git a/ui_framework/components/bar/bar.test.js b/ui_framework/src/components/bar/bar.test.js similarity index 100% rename from ui_framework/components/bar/bar.test.js rename to ui_framework/src/components/bar/bar.test.js diff --git a/ui_framework/components/bar/bar_section.js b/ui_framework/src/components/bar/bar_section.js similarity index 100% rename from ui_framework/components/bar/bar_section.js rename to ui_framework/src/components/bar/bar_section.js diff --git a/ui_framework/components/bar/bar_section.test.js b/ui_framework/src/components/bar/bar_section.test.js similarity index 100% rename from ui_framework/components/bar/bar_section.test.js rename to ui_framework/src/components/bar/bar_section.test.js diff --git a/ui_framework/components/bar/index.js b/ui_framework/src/components/bar/index.js similarity index 100% rename from ui_framework/components/bar/index.js rename to ui_framework/src/components/bar/index.js diff --git a/ui_framework/components/button/__snapshots__/button.test.js.snap b/ui_framework/src/components/button/__snapshots__/button.test.js.snap similarity index 100% rename from ui_framework/components/button/__snapshots__/button.test.js.snap rename to ui_framework/src/components/button/__snapshots__/button.test.js.snap diff --git a/ui_framework/components/button/__snapshots__/link_button.test.js.snap b/ui_framework/src/components/button/__snapshots__/link_button.test.js.snap similarity index 100% rename from ui_framework/components/button/__snapshots__/link_button.test.js.snap rename to ui_framework/src/components/button/__snapshots__/link_button.test.js.snap diff --git a/ui_framework/components/button/__snapshots__/submit_button.test.js.snap b/ui_framework/src/components/button/__snapshots__/submit_button.test.js.snap similarity index 100% rename from ui_framework/components/button/__snapshots__/submit_button.test.js.snap rename to ui_framework/src/components/button/__snapshots__/submit_button.test.js.snap diff --git a/ui_framework/components/button/_button.scss b/ui_framework/src/components/button/_button.scss similarity index 100% rename from ui_framework/components/button/_button.scss rename to ui_framework/src/components/button/_button.scss diff --git a/ui_framework/components/button/_index.scss b/ui_framework/src/components/button/_index.scss similarity index 100% rename from ui_framework/components/button/_index.scss rename to ui_framework/src/components/button/_index.scss diff --git a/ui_framework/components/button/button.js b/ui_framework/src/components/button/button.js similarity index 100% rename from ui_framework/components/button/button.js rename to ui_framework/src/components/button/button.js diff --git a/ui_framework/components/button/button.test.js b/ui_framework/src/components/button/button.test.js similarity index 100% rename from ui_framework/components/button/button.test.js rename to ui_framework/src/components/button/button.test.js diff --git a/ui_framework/components/button/button_group/__snapshots__/button_group.test.js.snap b/ui_framework/src/components/button/button_group/__snapshots__/button_group.test.js.snap similarity index 100% rename from ui_framework/components/button/button_group/__snapshots__/button_group.test.js.snap rename to ui_framework/src/components/button/button_group/__snapshots__/button_group.test.js.snap diff --git a/ui_framework/components/button/button_group/_button_group.scss b/ui_framework/src/components/button/button_group/_button_group.scss similarity index 100% rename from ui_framework/components/button/button_group/_button_group.scss rename to ui_framework/src/components/button/button_group/_button_group.scss diff --git a/ui_framework/components/button/button_group/button_group.js b/ui_framework/src/components/button/button_group/button_group.js similarity index 100% rename from ui_framework/components/button/button_group/button_group.js rename to ui_framework/src/components/button/button_group/button_group.js diff --git a/ui_framework/components/button/button_group/button_group.test.js b/ui_framework/src/components/button/button_group/button_group.test.js similarity index 100% rename from ui_framework/components/button/button_group/button_group.test.js rename to ui_framework/src/components/button/button_group/button_group.test.js diff --git a/ui_framework/components/button/button_icon/__snapshots__/button_icon.test.js.snap b/ui_framework/src/components/button/button_icon/__snapshots__/button_icon.test.js.snap similarity index 100% rename from ui_framework/components/button/button_icon/__snapshots__/button_icon.test.js.snap rename to ui_framework/src/components/button/button_icon/__snapshots__/button_icon.test.js.snap diff --git a/ui_framework/components/button/button_icon/button_icon.js b/ui_framework/src/components/button/button_icon/button_icon.js similarity index 100% rename from ui_framework/components/button/button_icon/button_icon.js rename to ui_framework/src/components/button/button_icon/button_icon.js diff --git a/ui_framework/components/button/button_icon/button_icon.test.js b/ui_framework/src/components/button/button_icon/button_icon.test.js similarity index 100% rename from ui_framework/components/button/button_icon/button_icon.test.js rename to ui_framework/src/components/button/button_icon/button_icon.test.js diff --git a/ui_framework/components/button/index.js b/ui_framework/src/components/button/index.js similarity index 100% rename from ui_framework/components/button/index.js rename to ui_framework/src/components/button/index.js diff --git a/ui_framework/components/button/link_button.test.js b/ui_framework/src/components/button/link_button.test.js similarity index 100% rename from ui_framework/components/button/link_button.test.js rename to ui_framework/src/components/button/link_button.test.js diff --git a/ui_framework/components/button/submit_button.test.js b/ui_framework/src/components/button/submit_button.test.js similarity index 100% rename from ui_framework/components/button/submit_button.test.js rename to ui_framework/src/components/button/submit_button.test.js diff --git a/ui_framework/components/card/__snapshots__/card.test.js.snap b/ui_framework/src/components/card/__snapshots__/card.test.js.snap similarity index 100% rename from ui_framework/components/card/__snapshots__/card.test.js.snap rename to ui_framework/src/components/card/__snapshots__/card.test.js.snap diff --git a/ui_framework/components/card/__snapshots__/card_description.test.js.snap b/ui_framework/src/components/card/__snapshots__/card_description.test.js.snap similarity index 100% rename from ui_framework/components/card/__snapshots__/card_description.test.js.snap rename to ui_framework/src/components/card/__snapshots__/card_description.test.js.snap diff --git a/ui_framework/components/card/__snapshots__/card_description_text.test.js.snap b/ui_framework/src/components/card/__snapshots__/card_description_text.test.js.snap similarity index 100% rename from ui_framework/components/card/__snapshots__/card_description_text.test.js.snap rename to ui_framework/src/components/card/__snapshots__/card_description_text.test.js.snap diff --git a/ui_framework/components/card/__snapshots__/card_description_title.test.js.snap b/ui_framework/src/components/card/__snapshots__/card_description_title.test.js.snap similarity index 100% rename from ui_framework/components/card/__snapshots__/card_description_title.test.js.snap rename to ui_framework/src/components/card/__snapshots__/card_description_title.test.js.snap diff --git a/ui_framework/components/card/__snapshots__/card_footer.test.js.snap b/ui_framework/src/components/card/__snapshots__/card_footer.test.js.snap similarity index 100% rename from ui_framework/components/card/__snapshots__/card_footer.test.js.snap rename to ui_framework/src/components/card/__snapshots__/card_footer.test.js.snap diff --git a/ui_framework/components/card/__snapshots__/card_group.test.js.snap b/ui_framework/src/components/card/__snapshots__/card_group.test.js.snap similarity index 100% rename from ui_framework/components/card/__snapshots__/card_group.test.js.snap rename to ui_framework/src/components/card/__snapshots__/card_group.test.js.snap diff --git a/ui_framework/components/card/_card.scss b/ui_framework/src/components/card/_card.scss similarity index 100% rename from ui_framework/components/card/_card.scss rename to ui_framework/src/components/card/_card.scss diff --git a/ui_framework/components/card/_card_group.scss b/ui_framework/src/components/card/_card_group.scss similarity index 100% rename from ui_framework/components/card/_card_group.scss rename to ui_framework/src/components/card/_card_group.scss diff --git a/ui_framework/components/card/_index.scss b/ui_framework/src/components/card/_index.scss similarity index 100% rename from ui_framework/components/card/_index.scss rename to ui_framework/src/components/card/_index.scss diff --git a/ui_framework/components/card/card.js b/ui_framework/src/components/card/card.js similarity index 100% rename from ui_framework/components/card/card.js rename to ui_framework/src/components/card/card.js diff --git a/ui_framework/components/card/card.test.js b/ui_framework/src/components/card/card.test.js similarity index 100% rename from ui_framework/components/card/card.test.js rename to ui_framework/src/components/card/card.test.js diff --git a/ui_framework/components/card/card_description.js b/ui_framework/src/components/card/card_description.js similarity index 100% rename from ui_framework/components/card/card_description.js rename to ui_framework/src/components/card/card_description.js diff --git a/ui_framework/components/card/card_description.test.js b/ui_framework/src/components/card/card_description.test.js similarity index 100% rename from ui_framework/components/card/card_description.test.js rename to ui_framework/src/components/card/card_description.test.js diff --git a/ui_framework/components/card/card_description_text.js b/ui_framework/src/components/card/card_description_text.js similarity index 100% rename from ui_framework/components/card/card_description_text.js rename to ui_framework/src/components/card/card_description_text.js diff --git a/ui_framework/components/card/card_description_text.test.js b/ui_framework/src/components/card/card_description_text.test.js similarity index 100% rename from ui_framework/components/card/card_description_text.test.js rename to ui_framework/src/components/card/card_description_text.test.js diff --git a/ui_framework/components/card/card_description_title.js b/ui_framework/src/components/card/card_description_title.js similarity index 100% rename from ui_framework/components/card/card_description_title.js rename to ui_framework/src/components/card/card_description_title.js diff --git a/ui_framework/components/card/card_description_title.test.js b/ui_framework/src/components/card/card_description_title.test.js similarity index 100% rename from ui_framework/components/card/card_description_title.test.js rename to ui_framework/src/components/card/card_description_title.test.js diff --git a/ui_framework/components/card/card_footer.js b/ui_framework/src/components/card/card_footer.js similarity index 100% rename from ui_framework/components/card/card_footer.js rename to ui_framework/src/components/card/card_footer.js diff --git a/ui_framework/components/card/card_footer.test.js b/ui_framework/src/components/card/card_footer.test.js similarity index 100% rename from ui_framework/components/card/card_footer.test.js rename to ui_framework/src/components/card/card_footer.test.js diff --git a/ui_framework/components/card/card_group.js b/ui_framework/src/components/card/card_group.js similarity index 100% rename from ui_framework/components/card/card_group.js rename to ui_framework/src/components/card/card_group.js diff --git a/ui_framework/components/card/card_group.test.js b/ui_framework/src/components/card/card_group.test.js similarity index 100% rename from ui_framework/components/card/card_group.test.js rename to ui_framework/src/components/card/card_group.test.js diff --git a/ui_framework/components/card/index.js b/ui_framework/src/components/card/index.js similarity index 100% rename from ui_framework/components/card/index.js rename to ui_framework/src/components/card/index.js diff --git a/ui_framework/components/collapse_button/__snapshots__/collapse_button.test.js.snap b/ui_framework/src/components/collapse_button/__snapshots__/collapse_button.test.js.snap similarity index 100% rename from ui_framework/components/collapse_button/__snapshots__/collapse_button.test.js.snap rename to ui_framework/src/components/collapse_button/__snapshots__/collapse_button.test.js.snap diff --git a/ui_framework/components/collapse_button/_collapse_button.scss b/ui_framework/src/components/collapse_button/_collapse_button.scss similarity index 100% rename from ui_framework/components/collapse_button/_collapse_button.scss rename to ui_framework/src/components/collapse_button/_collapse_button.scss diff --git a/ui_framework/components/collapse_button/_index.scss b/ui_framework/src/components/collapse_button/_index.scss similarity index 100% rename from ui_framework/components/collapse_button/_index.scss rename to ui_framework/src/components/collapse_button/_index.scss diff --git a/ui_framework/components/collapse_button/collapse_button.js b/ui_framework/src/components/collapse_button/collapse_button.js similarity index 100% rename from ui_framework/components/collapse_button/collapse_button.js rename to ui_framework/src/components/collapse_button/collapse_button.js diff --git a/ui_framework/components/collapse_button/collapse_button.test.js b/ui_framework/src/components/collapse_button/collapse_button.test.js similarity index 100% rename from ui_framework/components/collapse_button/collapse_button.test.js rename to ui_framework/src/components/collapse_button/collapse_button.test.js diff --git a/ui_framework/components/collapse_button/index.js b/ui_framework/src/components/collapse_button/index.js similarity index 100% rename from ui_framework/components/collapse_button/index.js rename to ui_framework/src/components/collapse_button/index.js diff --git a/ui_framework/components/color_picker/__snapshots__/color_picker.test.js.snap b/ui_framework/src/components/color_picker/__snapshots__/color_picker.test.js.snap similarity index 100% rename from ui_framework/components/color_picker/__snapshots__/color_picker.test.js.snap rename to ui_framework/src/components/color_picker/__snapshots__/color_picker.test.js.snap diff --git a/ui_framework/components/color_picker/_color_picker.scss b/ui_framework/src/components/color_picker/_color_picker.scss similarity index 100% rename from ui_framework/components/color_picker/_color_picker.scss rename to ui_framework/src/components/color_picker/_color_picker.scss diff --git a/ui_framework/components/color_picker/_index.scss b/ui_framework/src/components/color_picker/_index.scss similarity index 100% rename from ui_framework/components/color_picker/_index.scss rename to ui_framework/src/components/color_picker/_index.scss diff --git a/ui_framework/components/color_picker/color_picker.js b/ui_framework/src/components/color_picker/color_picker.js similarity index 100% rename from ui_framework/components/color_picker/color_picker.js rename to ui_framework/src/components/color_picker/color_picker.js diff --git a/ui_framework/components/color_picker/color_picker.test.js b/ui_framework/src/components/color_picker/color_picker.test.js similarity index 100% rename from ui_framework/components/color_picker/color_picker.test.js rename to ui_framework/src/components/color_picker/color_picker.test.js diff --git a/ui_framework/components/color_picker/color_picker_empty_swatch.js b/ui_framework/src/components/color_picker/color_picker_empty_swatch.js similarity index 100% rename from ui_framework/components/color_picker/color_picker_empty_swatch.js rename to ui_framework/src/components/color_picker/color_picker_empty_swatch.js diff --git a/ui_framework/components/color_picker/color_picker_swatch.js b/ui_framework/src/components/color_picker/color_picker_swatch.js similarity index 100% rename from ui_framework/components/color_picker/color_picker_swatch.js rename to ui_framework/src/components/color_picker/color_picker_swatch.js diff --git a/ui_framework/components/color_picker/index.js b/ui_framework/src/components/color_picker/index.js similarity index 100% rename from ui_framework/components/color_picker/index.js rename to ui_framework/src/components/color_picker/index.js diff --git a/ui_framework/components/column/_column.scss b/ui_framework/src/components/column/_column.scss similarity index 100% rename from ui_framework/components/column/_column.scss rename to ui_framework/src/components/column/_column.scss diff --git a/ui_framework/components/column/_index.scss b/ui_framework/src/components/column/_index.scss similarity index 100% rename from ui_framework/components/column/_index.scss rename to ui_framework/src/components/column/_index.scss diff --git a/ui_framework/components/empty_table_prompt/__snapshots__/empty_table_prompt.test.js.snap b/ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt.test.js.snap similarity index 100% rename from ui_framework/components/empty_table_prompt/__snapshots__/empty_table_prompt.test.js.snap rename to ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt.test.js.snap diff --git a/ui_framework/components/empty_table_prompt/__snapshots__/empty_table_prompt_actions.test.js.snap b/ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt_actions.test.js.snap similarity index 100% rename from ui_framework/components/empty_table_prompt/__snapshots__/empty_table_prompt_actions.test.js.snap rename to ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt_actions.test.js.snap diff --git a/ui_framework/components/empty_table_prompt/__snapshots__/empty_table_prompt_message.test.js.snap b/ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt_message.test.js.snap similarity index 100% rename from ui_framework/components/empty_table_prompt/__snapshots__/empty_table_prompt_message.test.js.snap rename to ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt_message.test.js.snap diff --git a/ui_framework/components/empty_table_prompt/__snapshots__/empty_table_prompt_panel.test.js.snap b/ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt_panel.test.js.snap similarity index 100% rename from ui_framework/components/empty_table_prompt/__snapshots__/empty_table_prompt_panel.test.js.snap rename to ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt_panel.test.js.snap diff --git a/ui_framework/components/empty_table_prompt/_empty_table_prompt.scss b/ui_framework/src/components/empty_table_prompt/_empty_table_prompt.scss similarity index 100% rename from ui_framework/components/empty_table_prompt/_empty_table_prompt.scss rename to ui_framework/src/components/empty_table_prompt/_empty_table_prompt.scss diff --git a/ui_framework/components/empty_table_prompt/_index.scss b/ui_framework/src/components/empty_table_prompt/_index.scss similarity index 100% rename from ui_framework/components/empty_table_prompt/_index.scss rename to ui_framework/src/components/empty_table_prompt/_index.scss diff --git a/ui_framework/components/empty_table_prompt/empty_table_prompt.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt.js similarity index 100% rename from ui_framework/components/empty_table_prompt/empty_table_prompt.js rename to ui_framework/src/components/empty_table_prompt/empty_table_prompt.js diff --git a/ui_framework/components/empty_table_prompt/empty_table_prompt.test.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt.test.js similarity index 100% rename from ui_framework/components/empty_table_prompt/empty_table_prompt.test.js rename to ui_framework/src/components/empty_table_prompt/empty_table_prompt.test.js diff --git a/ui_framework/components/empty_table_prompt/empty_table_prompt_actions.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js similarity index 100% rename from ui_framework/components/empty_table_prompt/empty_table_prompt_actions.js rename to ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js diff --git a/ui_framework/components/empty_table_prompt/empty_table_prompt_actions.test.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.test.js similarity index 100% rename from ui_framework/components/empty_table_prompt/empty_table_prompt_actions.test.js rename to ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.test.js diff --git a/ui_framework/components/empty_table_prompt/empty_table_prompt_message.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.js similarity index 100% rename from ui_framework/components/empty_table_prompt/empty_table_prompt_message.js rename to ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.js diff --git a/ui_framework/components/empty_table_prompt/empty_table_prompt_message.test.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.test.js similarity index 100% rename from ui_framework/components/empty_table_prompt/empty_table_prompt_message.test.js rename to ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.test.js diff --git a/ui_framework/components/empty_table_prompt/empty_table_prompt_panel.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.js similarity index 100% rename from ui_framework/components/empty_table_prompt/empty_table_prompt_panel.js rename to ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.js diff --git a/ui_framework/components/empty_table_prompt/empty_table_prompt_panel.test.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.test.js similarity index 100% rename from ui_framework/components/empty_table_prompt/empty_table_prompt_panel.test.js rename to ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.test.js diff --git a/ui_framework/components/empty_table_prompt/index.js b/ui_framework/src/components/empty_table_prompt/index.js similarity index 100% rename from ui_framework/components/empty_table_prompt/index.js rename to ui_framework/src/components/empty_table_prompt/index.js diff --git a/ui_framework/components/event/__snapshots__/event.test.js.snap b/ui_framework/src/components/event/__snapshots__/event.test.js.snap similarity index 100% rename from ui_framework/components/event/__snapshots__/event.test.js.snap rename to ui_framework/src/components/event/__snapshots__/event.test.js.snap diff --git a/ui_framework/components/event/__snapshots__/event_body.test.js.snap b/ui_framework/src/components/event/__snapshots__/event_body.test.js.snap similarity index 100% rename from ui_framework/components/event/__snapshots__/event_body.test.js.snap rename to ui_framework/src/components/event/__snapshots__/event_body.test.js.snap diff --git a/ui_framework/components/event/__snapshots__/event_body_message.test.js.snap b/ui_framework/src/components/event/__snapshots__/event_body_message.test.js.snap similarity index 100% rename from ui_framework/components/event/__snapshots__/event_body_message.test.js.snap rename to ui_framework/src/components/event/__snapshots__/event_body_message.test.js.snap diff --git a/ui_framework/components/event/__snapshots__/event_body_metadata.test.js.snap b/ui_framework/src/components/event/__snapshots__/event_body_metadata.test.js.snap similarity index 100% rename from ui_framework/components/event/__snapshots__/event_body_metadata.test.js.snap rename to ui_framework/src/components/event/__snapshots__/event_body_metadata.test.js.snap diff --git a/ui_framework/components/event/__snapshots__/event_symbol.test.js.snap b/ui_framework/src/components/event/__snapshots__/event_symbol.test.js.snap similarity index 100% rename from ui_framework/components/event/__snapshots__/event_symbol.test.js.snap rename to ui_framework/src/components/event/__snapshots__/event_symbol.test.js.snap diff --git a/ui_framework/components/event/_event.scss b/ui_framework/src/components/event/_event.scss similarity index 100% rename from ui_framework/components/event/_event.scss rename to ui_framework/src/components/event/_event.scss diff --git a/ui_framework/components/event/_index.scss b/ui_framework/src/components/event/_index.scss similarity index 100% rename from ui_framework/components/event/_index.scss rename to ui_framework/src/components/event/_index.scss diff --git a/ui_framework/components/event/event.js b/ui_framework/src/components/event/event.js similarity index 100% rename from ui_framework/components/event/event.js rename to ui_framework/src/components/event/event.js diff --git a/ui_framework/components/event/event.test.js b/ui_framework/src/components/event/event.test.js similarity index 100% rename from ui_framework/components/event/event.test.js rename to ui_framework/src/components/event/event.test.js diff --git a/ui_framework/components/event/event_body.js b/ui_framework/src/components/event/event_body.js similarity index 100% rename from ui_framework/components/event/event_body.js rename to ui_framework/src/components/event/event_body.js diff --git a/ui_framework/components/event/event_body.test.js b/ui_framework/src/components/event/event_body.test.js similarity index 100% rename from ui_framework/components/event/event_body.test.js rename to ui_framework/src/components/event/event_body.test.js diff --git a/ui_framework/components/event/event_body_message.js b/ui_framework/src/components/event/event_body_message.js similarity index 100% rename from ui_framework/components/event/event_body_message.js rename to ui_framework/src/components/event/event_body_message.js diff --git a/ui_framework/components/event/event_body_message.test.js b/ui_framework/src/components/event/event_body_message.test.js similarity index 100% rename from ui_framework/components/event/event_body_message.test.js rename to ui_framework/src/components/event/event_body_message.test.js diff --git a/ui_framework/components/event/event_body_metadata.js b/ui_framework/src/components/event/event_body_metadata.js similarity index 100% rename from ui_framework/components/event/event_body_metadata.js rename to ui_framework/src/components/event/event_body_metadata.js diff --git a/ui_framework/components/event/event_body_metadata.test.js b/ui_framework/src/components/event/event_body_metadata.test.js similarity index 100% rename from ui_framework/components/event/event_body_metadata.test.js rename to ui_framework/src/components/event/event_body_metadata.test.js diff --git a/ui_framework/components/event/event_symbol.js b/ui_framework/src/components/event/event_symbol.js similarity index 100% rename from ui_framework/components/event/event_symbol.js rename to ui_framework/src/components/event/event_symbol.js diff --git a/ui_framework/components/event/event_symbol.test.js b/ui_framework/src/components/event/event_symbol.test.js similarity index 100% rename from ui_framework/components/event/event_symbol.test.js rename to ui_framework/src/components/event/event_symbol.test.js diff --git a/ui_framework/components/event/index.js b/ui_framework/src/components/event/index.js similarity index 100% rename from ui_framework/components/event/index.js rename to ui_framework/src/components/event/index.js diff --git a/ui_framework/components/expression/_expression.scss b/ui_framework/src/components/expression/_expression.scss similarity index 100% rename from ui_framework/components/expression/_expression.scss rename to ui_framework/src/components/expression/_expression.scss diff --git a/ui_framework/components/expression/_index.scss b/ui_framework/src/components/expression/_index.scss similarity index 100% rename from ui_framework/components/expression/_index.scss rename to ui_framework/src/components/expression/_index.scss diff --git a/ui_framework/components/form/_assisted_input.scss b/ui_framework/src/components/form/_assisted_input.scss similarity index 100% rename from ui_framework/components/form/_assisted_input.scss rename to ui_framework/src/components/form/_assisted_input.scss diff --git a/ui_framework/components/form/_check_box.scss b/ui_framework/src/components/form/_check_box.scss similarity index 100% rename from ui_framework/components/form/_check_box.scss rename to ui_framework/src/components/form/_check_box.scss diff --git a/ui_framework/components/form/_index.scss b/ui_framework/src/components/form/_index.scss similarity index 100% rename from ui_framework/components/form/_index.scss rename to ui_framework/src/components/form/_index.scss diff --git a/ui_framework/components/form/_label.scss b/ui_framework/src/components/form/_label.scss similarity index 100% rename from ui_framework/components/form/_label.scss rename to ui_framework/src/components/form/_label.scss diff --git a/ui_framework/components/form/_search_input.scss b/ui_framework/src/components/form/_search_input.scss similarity index 100% rename from ui_framework/components/form/_search_input.scss rename to ui_framework/src/components/form/_search_input.scss diff --git a/ui_framework/components/form/_select.scss b/ui_framework/src/components/form/_select.scss similarity index 100% rename from ui_framework/components/form/_select.scss rename to ui_framework/src/components/form/_select.scss diff --git a/ui_framework/components/form/_static_input.scss b/ui_framework/src/components/form/_static_input.scss similarity index 100% rename from ui_framework/components/form/_static_input.scss rename to ui_framework/src/components/form/_static_input.scss diff --git a/ui_framework/components/form/_text_area.scss b/ui_framework/src/components/form/_text_area.scss similarity index 100% rename from ui_framework/components/form/_text_area.scss rename to ui_framework/src/components/form/_text_area.scss diff --git a/ui_framework/components/form/_text_input.scss b/ui_framework/src/components/form/_text_input.scss similarity index 100% rename from ui_framework/components/form/_text_input.scss rename to ui_framework/src/components/form/_text_input.scss diff --git a/ui_framework/components/form_layout/__snapshots__/field_group.test.js.snap b/ui_framework/src/components/form_layout/__snapshots__/field_group.test.js.snap similarity index 100% rename from ui_framework/components/form_layout/__snapshots__/field_group.test.js.snap rename to ui_framework/src/components/form_layout/__snapshots__/field_group.test.js.snap diff --git a/ui_framework/components/form_layout/__snapshots__/field_group_section.test.js.snap b/ui_framework/src/components/form_layout/__snapshots__/field_group_section.test.js.snap similarity index 100% rename from ui_framework/components/form_layout/__snapshots__/field_group_section.test.js.snap rename to ui_framework/src/components/form_layout/__snapshots__/field_group_section.test.js.snap diff --git a/ui_framework/components/form_layout/_field_group.scss b/ui_framework/src/components/form_layout/_field_group.scss similarity index 100% rename from ui_framework/components/form_layout/_field_group.scss rename to ui_framework/src/components/form_layout/_field_group.scss diff --git a/ui_framework/components/form_layout/_index.scss b/ui_framework/src/components/form_layout/_index.scss similarity index 100% rename from ui_framework/components/form_layout/_index.scss rename to ui_framework/src/components/form_layout/_index.scss diff --git a/ui_framework/components/form_layout/field_group.js b/ui_framework/src/components/form_layout/field_group.js similarity index 100% rename from ui_framework/components/form_layout/field_group.js rename to ui_framework/src/components/form_layout/field_group.js diff --git a/ui_framework/components/form_layout/field_group.test.js b/ui_framework/src/components/form_layout/field_group.test.js similarity index 100% rename from ui_framework/components/form_layout/field_group.test.js rename to ui_framework/src/components/form_layout/field_group.test.js diff --git a/ui_framework/components/form_layout/field_group_section.js b/ui_framework/src/components/form_layout/field_group_section.js similarity index 100% rename from ui_framework/components/form_layout/field_group_section.js rename to ui_framework/src/components/form_layout/field_group_section.js diff --git a/ui_framework/components/form_layout/field_group_section.test.js b/ui_framework/src/components/form_layout/field_group_section.test.js similarity index 100% rename from ui_framework/components/form_layout/field_group_section.test.js rename to ui_framework/src/components/form_layout/field_group_section.test.js diff --git a/ui_framework/components/form_layout/index.js b/ui_framework/src/components/form_layout/index.js similarity index 100% rename from ui_framework/components/form_layout/index.js rename to ui_framework/src/components/form_layout/index.js diff --git a/ui_framework/components/gallery/__snapshots__/gallery.test.js.snap b/ui_framework/src/components/gallery/__snapshots__/gallery.test.js.snap similarity index 100% rename from ui_framework/components/gallery/__snapshots__/gallery.test.js.snap rename to ui_framework/src/components/gallery/__snapshots__/gallery.test.js.snap diff --git a/ui_framework/components/gallery/_gallery.scss b/ui_framework/src/components/gallery/_gallery.scss similarity index 100% rename from ui_framework/components/gallery/_gallery.scss rename to ui_framework/src/components/gallery/_gallery.scss diff --git a/ui_framework/components/gallery/_gallery_button.scss b/ui_framework/src/components/gallery/_gallery_button.scss similarity index 100% rename from ui_framework/components/gallery/_gallery_button.scss rename to ui_framework/src/components/gallery/_gallery_button.scss diff --git a/ui_framework/components/gallery/_index.scss b/ui_framework/src/components/gallery/_index.scss similarity index 100% rename from ui_framework/components/gallery/_index.scss rename to ui_framework/src/components/gallery/_index.scss diff --git a/ui_framework/components/gallery/gallery.js b/ui_framework/src/components/gallery/gallery.js similarity index 100% rename from ui_framework/components/gallery/gallery.js rename to ui_framework/src/components/gallery/gallery.js diff --git a/ui_framework/components/gallery/gallery.test.js b/ui_framework/src/components/gallery/gallery.test.js similarity index 100% rename from ui_framework/components/gallery/gallery.test.js rename to ui_framework/src/components/gallery/gallery.test.js diff --git a/ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button.test.js.snap b/ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button.test.js.snap similarity index 100% rename from ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button.test.js.snap rename to ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button.test.js.snap diff --git a/ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button_icon.test.js.snap b/ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button_icon.test.js.snap similarity index 100% rename from ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button_icon.test.js.snap rename to ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button_icon.test.js.snap diff --git a/ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button_image.test.js.snap b/ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button_image.test.js.snap similarity index 100% rename from ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button_image.test.js.snap rename to ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button_image.test.js.snap diff --git a/ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button_label.test.js.snap b/ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button_label.test.js.snap similarity index 100% rename from ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button_label.test.js.snap rename to ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button_label.test.js.snap diff --git a/ui_framework/components/gallery/gallery_button/gallery_button.js b/ui_framework/src/components/gallery/gallery_button/gallery_button.js similarity index 100% rename from ui_framework/components/gallery/gallery_button/gallery_button.js rename to ui_framework/src/components/gallery/gallery_button/gallery_button.js diff --git a/ui_framework/components/gallery/gallery_button/gallery_button.test.js b/ui_framework/src/components/gallery/gallery_button/gallery_button.test.js similarity index 100% rename from ui_framework/components/gallery/gallery_button/gallery_button.test.js rename to ui_framework/src/components/gallery/gallery_button/gallery_button.test.js diff --git a/ui_framework/components/gallery/gallery_button/gallery_button_icon.js b/ui_framework/src/components/gallery/gallery_button/gallery_button_icon.js similarity index 100% rename from ui_framework/components/gallery/gallery_button/gallery_button_icon.js rename to ui_framework/src/components/gallery/gallery_button/gallery_button_icon.js diff --git a/ui_framework/components/gallery/gallery_button/gallery_button_icon.test.js b/ui_framework/src/components/gallery/gallery_button/gallery_button_icon.test.js similarity index 100% rename from ui_framework/components/gallery/gallery_button/gallery_button_icon.test.js rename to ui_framework/src/components/gallery/gallery_button/gallery_button_icon.test.js diff --git a/ui_framework/components/gallery/gallery_button/gallery_button_image.js b/ui_framework/src/components/gallery/gallery_button/gallery_button_image.js similarity index 100% rename from ui_framework/components/gallery/gallery_button/gallery_button_image.js rename to ui_framework/src/components/gallery/gallery_button/gallery_button_image.js diff --git a/ui_framework/components/gallery/gallery_button/gallery_button_image.test.js b/ui_framework/src/components/gallery/gallery_button/gallery_button_image.test.js similarity index 100% rename from ui_framework/components/gallery/gallery_button/gallery_button_image.test.js rename to ui_framework/src/components/gallery/gallery_button/gallery_button_image.test.js diff --git a/ui_framework/components/gallery/gallery_button/gallery_button_label.js b/ui_framework/src/components/gallery/gallery_button/gallery_button_label.js similarity index 100% rename from ui_framework/components/gallery/gallery_button/gallery_button_label.js rename to ui_framework/src/components/gallery/gallery_button/gallery_button_label.js diff --git a/ui_framework/components/gallery/gallery_button/gallery_button_label.test.js b/ui_framework/src/components/gallery/gallery_button/gallery_button_label.test.js similarity index 100% rename from ui_framework/components/gallery/gallery_button/gallery_button_label.test.js rename to ui_framework/src/components/gallery/gallery_button/gallery_button_label.test.js diff --git a/ui_framework/components/gallery/index.js b/ui_framework/src/components/gallery/index.js similarity index 100% rename from ui_framework/components/gallery/index.js rename to ui_framework/src/components/gallery/index.js diff --git a/ui_framework/components/header_bar/__snapshots__/header_bar.test.js.snap b/ui_framework/src/components/header_bar/__snapshots__/header_bar.test.js.snap similarity index 100% rename from ui_framework/components/header_bar/__snapshots__/header_bar.test.js.snap rename to ui_framework/src/components/header_bar/__snapshots__/header_bar.test.js.snap diff --git a/ui_framework/components/header_bar/__snapshots__/header_bar_section.test.js.snap b/ui_framework/src/components/header_bar/__snapshots__/header_bar_section.test.js.snap similarity index 100% rename from ui_framework/components/header_bar/__snapshots__/header_bar_section.test.js.snap rename to ui_framework/src/components/header_bar/__snapshots__/header_bar_section.test.js.snap diff --git a/ui_framework/components/header_bar/_header_bar.scss b/ui_framework/src/components/header_bar/_header_bar.scss similarity index 100% rename from ui_framework/components/header_bar/_header_bar.scss rename to ui_framework/src/components/header_bar/_header_bar.scss diff --git a/ui_framework/components/header_bar/_index.scss b/ui_framework/src/components/header_bar/_index.scss similarity index 100% rename from ui_framework/components/header_bar/_index.scss rename to ui_framework/src/components/header_bar/_index.scss diff --git a/ui_framework/components/header_bar/header_bar.js b/ui_framework/src/components/header_bar/header_bar.js similarity index 100% rename from ui_framework/components/header_bar/header_bar.js rename to ui_framework/src/components/header_bar/header_bar.js diff --git a/ui_framework/components/header_bar/header_bar.test.js b/ui_framework/src/components/header_bar/header_bar.test.js similarity index 100% rename from ui_framework/components/header_bar/header_bar.test.js rename to ui_framework/src/components/header_bar/header_bar.test.js diff --git a/ui_framework/components/header_bar/header_bar_section.js b/ui_framework/src/components/header_bar/header_bar_section.js similarity index 100% rename from ui_framework/components/header_bar/header_bar_section.js rename to ui_framework/src/components/header_bar/header_bar_section.js diff --git a/ui_framework/components/header_bar/header_bar_section.test.js b/ui_framework/src/components/header_bar/header_bar_section.test.js similarity index 100% rename from ui_framework/components/header_bar/header_bar_section.test.js rename to ui_framework/src/components/header_bar/header_bar_section.test.js diff --git a/ui_framework/components/header_bar/index.js b/ui_framework/src/components/header_bar/index.js similarity index 100% rename from ui_framework/components/header_bar/index.js rename to ui_framework/src/components/header_bar/index.js diff --git a/ui_framework/components/icon/_icon.scss b/ui_framework/src/components/icon/_icon.scss similarity index 100% rename from ui_framework/components/icon/_icon.scss rename to ui_framework/src/components/icon/_icon.scss diff --git a/ui_framework/components/icon/_index.scss b/ui_framework/src/components/icon/_index.scss similarity index 100% rename from ui_framework/components/icon/_index.scss rename to ui_framework/src/components/icon/_index.scss diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js new file mode 100644 index 0000000000000..fe3d7d3eaf831 --- /dev/null +++ b/ui_framework/src/components/index.js @@ -0,0 +1,133 @@ +export { KuiActionItem } from './action_item'; + +export { + KuiKeyboardAccessible, + KuiScreenReaderOnly, +} from './accessibility'; + +export { + KuiBar, + KuiBarSection, +} from './bar'; + +export { + KuiButton, + KuiButtonGroup, + KuiButtonIcon, + KuiLinkButton, + KuiSubmitButton, +} from './button'; + +export { + KuiCard, + KuiCardDescriptionText, + KuiCardDescriptionTitle, + KuiCardDescription, + KuiCardFooter, + KuiCardGroup, +} from './card'; + +export { + KuiColorPicker, +} from './color_picker'; + +export { + KuiCollapseButton, +} from './collapse_button'; + +export { + KuiEmptyTablePrompt, + KuiEmptyTablePromptMessage, + KuiEmptyTablePromptPanel, +} from './empty_table_prompt'; + +export { + KuiEvent, + KuiEventSymbol, + KuiEventBody, + KuiEventBodyMessage, + KuiEventBodyMetadata, +} from './event'; + +export { + KuiFieldGroup, + KuiFieldGroupSection, +} from './form_layout'; + +export { + KuiGallery, + KuiGalleryButton, + KuiGalleryButtonIcon, + KuiGalleryButtonImage, + KuiGalleryButtonLabel, +} from './gallery'; + +export { + KuiHeaderBar, + KuiHeaderBarSection, +} from './header_bar'; + +export { KuiInfoButton } from './info_button'; + +export { + KuiLocalNav, + KuiLocalNavRow, + KuiLocalNavRowSection, + KuiLocalTab, + KuiLocalTabs, + KuiLocalTitle, +} from './local_nav'; + +export { + KuiMenu, + KuiMenuItem, +} from './menu'; + +export { + KUI_MODAL_CANCEL_BUTTON, + KUI_MODAL_CONFIRM_BUTTON, + KuiConfirmModal, + KuiModal, + KuiModalBody, + KuiModalBodyText, + KuiModalFooter, + KuiModalHeader, + KuiModalHeaderTitle, + KuiModalOverlay, +} from './modal'; + +export { + KuiPager, + KuiPagerButtonGroup, +} from './pager'; + +export { + KuiPopover, +} from './popover'; + +export { + KuiTabs, + KuiTab +} from './tabs'; + +export { + KuiTable, + KuiControlledTable, + KuiTableHeaderCell, + KuiTableRow, + KuiTableRowCell, + KuiTableInfo, + KuiTableRowCheckBoxCell, + KuiTableHeaderCheckBoxCell, + KuiTableHeader, + KuiTableBody, +} from './table'; + +export { + KuiToolBar, + KuiToolBarSearchBox, + KuiToolBarFooter, + KuiToolBarSection, + KuiToolBarFooterSection, + KuiToolBarText +} from './tool_bar'; diff --git a/ui_framework/components/index.scss b/ui_framework/src/components/index.scss similarity index 95% rename from ui_framework/components/index.scss rename to ui_framework/src/components/index.scss index 37a0e90793d85..6f432f2d266a0 100644 --- a/ui_framework/components/index.scss +++ b/ui_framework/src/components/index.scss @@ -12,13 +12,6 @@ // When possible, if making changes to those legacy components, please think about // instead adding them to this library and deprecating that dependency. - -// Global constants -@import "variables"; -@import "mixins"; -@import "common_styles"; - -// Components @import "accessibility/index"; @import "action_item/index"; @import "badge/index"; diff --git a/ui_framework/components/info_button/__snapshots__/info_button.test.js.snap b/ui_framework/src/components/info_button/__snapshots__/info_button.test.js.snap similarity index 100% rename from ui_framework/components/info_button/__snapshots__/info_button.test.js.snap rename to ui_framework/src/components/info_button/__snapshots__/info_button.test.js.snap diff --git a/ui_framework/components/info_button/_index.scss b/ui_framework/src/components/info_button/_index.scss similarity index 100% rename from ui_framework/components/info_button/_index.scss rename to ui_framework/src/components/info_button/_index.scss diff --git a/ui_framework/components/info_button/_info_button.scss b/ui_framework/src/components/info_button/_info_button.scss similarity index 100% rename from ui_framework/components/info_button/_info_button.scss rename to ui_framework/src/components/info_button/_info_button.scss diff --git a/ui_framework/components/info_button/index.js b/ui_framework/src/components/info_button/index.js similarity index 100% rename from ui_framework/components/info_button/index.js rename to ui_framework/src/components/info_button/index.js diff --git a/ui_framework/components/info_button/info_button.js b/ui_framework/src/components/info_button/info_button.js similarity index 100% rename from ui_framework/components/info_button/info_button.js rename to ui_framework/src/components/info_button/info_button.js diff --git a/ui_framework/components/info_button/info_button.test.js b/ui_framework/src/components/info_button/info_button.test.js similarity index 100% rename from ui_framework/components/info_button/info_button.test.js rename to ui_framework/src/components/info_button/info_button.test.js diff --git a/ui_framework/components/info_panel/_index.scss b/ui_framework/src/components/info_panel/_index.scss similarity index 100% rename from ui_framework/components/info_panel/_index.scss rename to ui_framework/src/components/info_panel/_index.scss diff --git a/ui_framework/components/info_panel/_info_panel.scss b/ui_framework/src/components/info_panel/_info_panel.scss similarity index 100% rename from ui_framework/components/info_panel/_info_panel.scss rename to ui_framework/src/components/info_panel/_info_panel.scss diff --git a/ui_framework/components/link/_index.scss b/ui_framework/src/components/link/_index.scss similarity index 100% rename from ui_framework/components/link/_index.scss rename to ui_framework/src/components/link/_index.scss diff --git a/ui_framework/components/link/_link.scss b/ui_framework/src/components/link/_link.scss similarity index 100% rename from ui_framework/components/link/_link.scss rename to ui_framework/src/components/link/_link.scss diff --git a/ui_framework/components/local_nav/__snapshots__/local_nav.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_nav.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_nav.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_nav.test.js.snap diff --git a/ui_framework/components/local_nav/__snapshots__/local_nav_row.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_nav_row.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_nav_row.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_nav_row.test.js.snap diff --git a/ui_framework/components/local_nav/__snapshots__/local_nav_row_section.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_nav_row_section.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_nav_row_section.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_nav_row_section.test.js.snap diff --git a/ui_framework/components/local_nav/__snapshots__/local_tab.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_tab.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_tab.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_tab.test.js.snap diff --git a/ui_framework/components/local_nav/__snapshots__/local_tabs.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_tabs.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_tabs.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_tabs.test.js.snap diff --git a/ui_framework/components/local_nav/__snapshots__/local_title.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_title.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_title.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_title.test.js.snap diff --git a/ui_framework/components/local_nav/_index.scss b/ui_framework/src/components/local_nav/_index.scss similarity index 100% rename from ui_framework/components/local_nav/_index.scss rename to ui_framework/src/components/local_nav/_index.scss diff --git a/ui_framework/components/local_nav/_local_breadcrumbs.scss b/ui_framework/src/components/local_nav/_local_breadcrumbs.scss similarity index 100% rename from ui_framework/components/local_nav/_local_breadcrumbs.scss rename to ui_framework/src/components/local_nav/_local_breadcrumbs.scss diff --git a/ui_framework/components/local_nav/_local_date_picker.scss b/ui_framework/src/components/local_nav/_local_date_picker.scss similarity index 100% rename from ui_framework/components/local_nav/_local_date_picker.scss rename to ui_framework/src/components/local_nav/_local_date_picker.scss diff --git a/ui_framework/components/local_nav/_local_dropdown.scss b/ui_framework/src/components/local_nav/_local_dropdown.scss similarity index 100% rename from ui_framework/components/local_nav/_local_dropdown.scss rename to ui_framework/src/components/local_nav/_local_dropdown.scss diff --git a/ui_framework/components/local_nav/_local_menu.scss b/ui_framework/src/components/local_nav/_local_menu.scss similarity index 100% rename from ui_framework/components/local_nav/_local_menu.scss rename to ui_framework/src/components/local_nav/_local_menu.scss diff --git a/ui_framework/components/local_nav/_local_nav.scss b/ui_framework/src/components/local_nav/_local_nav.scss similarity index 100% rename from ui_framework/components/local_nav/_local_nav.scss rename to ui_framework/src/components/local_nav/_local_nav.scss diff --git a/ui_framework/components/local_nav/_local_search.scss b/ui_framework/src/components/local_nav/_local_search.scss similarity index 100% rename from ui_framework/components/local_nav/_local_search.scss rename to ui_framework/src/components/local_nav/_local_search.scss diff --git a/ui_framework/components/local_nav/_local_tabs.scss b/ui_framework/src/components/local_nav/_local_tabs.scss similarity index 100% rename from ui_framework/components/local_nav/_local_tabs.scss rename to ui_framework/src/components/local_nav/_local_tabs.scss diff --git a/ui_framework/components/local_nav/_local_title.scss b/ui_framework/src/components/local_nav/_local_title.scss similarity index 100% rename from ui_framework/components/local_nav/_local_title.scss rename to ui_framework/src/components/local_nav/_local_title.scss diff --git a/ui_framework/components/local_nav/index.js b/ui_framework/src/components/local_nav/index.js similarity index 100% rename from ui_framework/components/local_nav/index.js rename to ui_framework/src/components/local_nav/index.js diff --git a/ui_framework/components/local_nav/local_nav.js b/ui_framework/src/components/local_nav/local_nav.js similarity index 100% rename from ui_framework/components/local_nav/local_nav.js rename to ui_framework/src/components/local_nav/local_nav.js diff --git a/ui_framework/components/local_nav/local_nav.test.js b/ui_framework/src/components/local_nav/local_nav.test.js similarity index 100% rename from ui_framework/components/local_nav/local_nav.test.js rename to ui_framework/src/components/local_nav/local_nav.test.js diff --git a/ui_framework/components/local_nav/local_nav_row.js b/ui_framework/src/components/local_nav/local_nav_row.js similarity index 100% rename from ui_framework/components/local_nav/local_nav_row.js rename to ui_framework/src/components/local_nav/local_nav_row.js diff --git a/ui_framework/components/local_nav/local_nav_row.test.js b/ui_framework/src/components/local_nav/local_nav_row.test.js similarity index 100% rename from ui_framework/components/local_nav/local_nav_row.test.js rename to ui_framework/src/components/local_nav/local_nav_row.test.js diff --git a/ui_framework/components/local_nav/local_nav_row_section.js b/ui_framework/src/components/local_nav/local_nav_row_section.js similarity index 100% rename from ui_framework/components/local_nav/local_nav_row_section.js rename to ui_framework/src/components/local_nav/local_nav_row_section.js diff --git a/ui_framework/components/local_nav/local_nav_row_section.test.js b/ui_framework/src/components/local_nav/local_nav_row_section.test.js similarity index 100% rename from ui_framework/components/local_nav/local_nav_row_section.test.js rename to ui_framework/src/components/local_nav/local_nav_row_section.test.js diff --git a/ui_framework/components/local_nav/local_tab.js b/ui_framework/src/components/local_nav/local_tab.js similarity index 100% rename from ui_framework/components/local_nav/local_tab.js rename to ui_framework/src/components/local_nav/local_tab.js diff --git a/ui_framework/components/local_nav/local_tab.test.js b/ui_framework/src/components/local_nav/local_tab.test.js similarity index 100% rename from ui_framework/components/local_nav/local_tab.test.js rename to ui_framework/src/components/local_nav/local_tab.test.js diff --git a/ui_framework/components/local_nav/local_tabs.js b/ui_framework/src/components/local_nav/local_tabs.js similarity index 100% rename from ui_framework/components/local_nav/local_tabs.js rename to ui_framework/src/components/local_nav/local_tabs.js diff --git a/ui_framework/components/local_nav/local_tabs.test.js b/ui_framework/src/components/local_nav/local_tabs.test.js similarity index 100% rename from ui_framework/components/local_nav/local_tabs.test.js rename to ui_framework/src/components/local_nav/local_tabs.test.js diff --git a/ui_framework/components/local_nav/local_title.js b/ui_framework/src/components/local_nav/local_title.js similarity index 100% rename from ui_framework/components/local_nav/local_title.js rename to ui_framework/src/components/local_nav/local_title.js diff --git a/ui_framework/components/local_nav/local_title.test.js b/ui_framework/src/components/local_nav/local_title.test.js similarity index 100% rename from ui_framework/components/local_nav/local_title.test.js rename to ui_framework/src/components/local_nav/local_title.test.js diff --git a/ui_framework/components/menu/__snapshots__/menu.test.js.snap b/ui_framework/src/components/menu/__snapshots__/menu.test.js.snap similarity index 100% rename from ui_framework/components/menu/__snapshots__/menu.test.js.snap rename to ui_framework/src/components/menu/__snapshots__/menu.test.js.snap diff --git a/ui_framework/components/menu/__snapshots__/menu_item.test.js.snap b/ui_framework/src/components/menu/__snapshots__/menu_item.test.js.snap similarity index 100% rename from ui_framework/components/menu/__snapshots__/menu_item.test.js.snap rename to ui_framework/src/components/menu/__snapshots__/menu_item.test.js.snap diff --git a/ui_framework/components/menu/_index.scss b/ui_framework/src/components/menu/_index.scss similarity index 100% rename from ui_framework/components/menu/_index.scss rename to ui_framework/src/components/menu/_index.scss diff --git a/ui_framework/components/menu/_menu.scss b/ui_framework/src/components/menu/_menu.scss similarity index 100% rename from ui_framework/components/menu/_menu.scss rename to ui_framework/src/components/menu/_menu.scss diff --git a/ui_framework/components/menu/index.js b/ui_framework/src/components/menu/index.js similarity index 100% rename from ui_framework/components/menu/index.js rename to ui_framework/src/components/menu/index.js diff --git a/ui_framework/components/menu/menu.js b/ui_framework/src/components/menu/menu.js similarity index 100% rename from ui_framework/components/menu/menu.js rename to ui_framework/src/components/menu/menu.js diff --git a/ui_framework/components/menu/menu.test.js b/ui_framework/src/components/menu/menu.test.js similarity index 100% rename from ui_framework/components/menu/menu.test.js rename to ui_framework/src/components/menu/menu.test.js diff --git a/ui_framework/components/menu/menu_item.js b/ui_framework/src/components/menu/menu_item.js similarity index 100% rename from ui_framework/components/menu/menu_item.js rename to ui_framework/src/components/menu/menu_item.js diff --git a/ui_framework/components/menu/menu_item.test.js b/ui_framework/src/components/menu/menu_item.test.js similarity index 100% rename from ui_framework/components/menu/menu_item.test.js rename to ui_framework/src/components/menu/menu_item.test.js diff --git a/ui_framework/components/menu_button/_index.scss b/ui_framework/src/components/menu_button/_index.scss similarity index 100% rename from ui_framework/components/menu_button/_index.scss rename to ui_framework/src/components/menu_button/_index.scss diff --git a/ui_framework/components/menu_button/_menu_button.scss b/ui_framework/src/components/menu_button/_menu_button.scss similarity index 100% rename from ui_framework/components/menu_button/_menu_button.scss rename to ui_framework/src/components/menu_button/_menu_button.scss diff --git a/ui_framework/components/menu_button/_menu_button_group.scss b/ui_framework/src/components/menu_button/_menu_button_group.scss similarity index 100% rename from ui_framework/components/menu_button/_menu_button_group.scss rename to ui_framework/src/components/menu_button/_menu_button_group.scss diff --git a/ui_framework/components/micro_button/_index.scss b/ui_framework/src/components/micro_button/_index.scss similarity index 100% rename from ui_framework/components/micro_button/_index.scss rename to ui_framework/src/components/micro_button/_index.scss diff --git a/ui_framework/components/micro_button/_micro_button.scss b/ui_framework/src/components/micro_button/_micro_button.scss similarity index 100% rename from ui_framework/components/micro_button/_micro_button.scss rename to ui_framework/src/components/micro_button/_micro_button.scss diff --git a/ui_framework/components/micro_button/_micro_button_group.scss b/ui_framework/src/components/micro_button/_micro_button_group.scss similarity index 100% rename from ui_framework/components/micro_button/_micro_button_group.scss rename to ui_framework/src/components/micro_button/_micro_button_group.scss diff --git a/ui_framework/components/modal/__snapshots__/confirm_modal.test.js.snap b/ui_framework/src/components/modal/__snapshots__/confirm_modal.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/confirm_modal.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/confirm_modal.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_body.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_body.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_body.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_body.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_body_text.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_body_text.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_body_text.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_body_text.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_footer.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_footer.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_footer.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_footer.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_header.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_header.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_header.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_header.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_header_title.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_header_title.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_header_title.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_header_title.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_overlay.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_overlay.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_overlay.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_overlay.test.js.snap diff --git a/ui_framework/components/modal/_index.scss b/ui_framework/src/components/modal/_index.scss similarity index 100% rename from ui_framework/components/modal/_index.scss rename to ui_framework/src/components/modal/_index.scss diff --git a/ui_framework/components/modal/_modal.scss b/ui_framework/src/components/modal/_modal.scss similarity index 100% rename from ui_framework/components/modal/_modal.scss rename to ui_framework/src/components/modal/_modal.scss diff --git a/ui_framework/components/modal/_modal_overlay.scss b/ui_framework/src/components/modal/_modal_overlay.scss similarity index 100% rename from ui_framework/components/modal/_modal_overlay.scss rename to ui_framework/src/components/modal/_modal_overlay.scss diff --git a/ui_framework/components/modal/confirm_modal.js b/ui_framework/src/components/modal/confirm_modal.js similarity index 100% rename from ui_framework/components/modal/confirm_modal.js rename to ui_framework/src/components/modal/confirm_modal.js diff --git a/ui_framework/components/modal/confirm_modal.test.js b/ui_framework/src/components/modal/confirm_modal.test.js similarity index 100% rename from ui_framework/components/modal/confirm_modal.test.js rename to ui_framework/src/components/modal/confirm_modal.test.js diff --git a/ui_framework/components/modal/index.js b/ui_framework/src/components/modal/index.js similarity index 70% rename from ui_framework/components/modal/index.js rename to ui_framework/src/components/modal/index.js index e1601d386ba3b..2224887434d0a 100644 --- a/ui_framework/components/modal/index.js +++ b/ui_framework/src/components/modal/index.js @@ -1,4 +1,8 @@ -export { KuiConfirmModal } from './confirm_modal'; +export { + KuiConfirmModal, + CONFIRM_BUTTON as KUI_MODAL_CONFIRM_BUTTON, + CANCEL_BUTTON as KUI_MODAL_CANCEL_BUTTON, +} from './confirm_modal'; export { KuiModal } from './modal'; export { KuiModalFooter } from './modal_footer'; export { KuiModalHeader } from './modal_header'; diff --git a/ui_framework/components/modal/modal.js b/ui_framework/src/components/modal/modal.js similarity index 100% rename from ui_framework/components/modal/modal.js rename to ui_framework/src/components/modal/modal.js diff --git a/ui_framework/components/modal/modal.test.js b/ui_framework/src/components/modal/modal.test.js similarity index 100% rename from ui_framework/components/modal/modal.test.js rename to ui_framework/src/components/modal/modal.test.js diff --git a/ui_framework/components/modal/modal_body.js b/ui_framework/src/components/modal/modal_body.js similarity index 100% rename from ui_framework/components/modal/modal_body.js rename to ui_framework/src/components/modal/modal_body.js diff --git a/ui_framework/components/modal/modal_body.test.js b/ui_framework/src/components/modal/modal_body.test.js similarity index 100% rename from ui_framework/components/modal/modal_body.test.js rename to ui_framework/src/components/modal/modal_body.test.js diff --git a/ui_framework/components/modal/modal_body_text.js b/ui_framework/src/components/modal/modal_body_text.js similarity index 100% rename from ui_framework/components/modal/modal_body_text.js rename to ui_framework/src/components/modal/modal_body_text.js diff --git a/ui_framework/components/modal/modal_body_text.test.js b/ui_framework/src/components/modal/modal_body_text.test.js similarity index 100% rename from ui_framework/components/modal/modal_body_text.test.js rename to ui_framework/src/components/modal/modal_body_text.test.js diff --git a/ui_framework/components/modal/modal_footer.js b/ui_framework/src/components/modal/modal_footer.js similarity index 100% rename from ui_framework/components/modal/modal_footer.js rename to ui_framework/src/components/modal/modal_footer.js diff --git a/ui_framework/components/modal/modal_footer.test.js b/ui_framework/src/components/modal/modal_footer.test.js similarity index 100% rename from ui_framework/components/modal/modal_footer.test.js rename to ui_framework/src/components/modal/modal_footer.test.js diff --git a/ui_framework/components/modal/modal_header.js b/ui_framework/src/components/modal/modal_header.js similarity index 100% rename from ui_framework/components/modal/modal_header.js rename to ui_framework/src/components/modal/modal_header.js diff --git a/ui_framework/components/modal/modal_header.test.js b/ui_framework/src/components/modal/modal_header.test.js similarity index 100% rename from ui_framework/components/modal/modal_header.test.js rename to ui_framework/src/components/modal/modal_header.test.js diff --git a/ui_framework/components/modal/modal_header_title.js b/ui_framework/src/components/modal/modal_header_title.js similarity index 100% rename from ui_framework/components/modal/modal_header_title.js rename to ui_framework/src/components/modal/modal_header_title.js diff --git a/ui_framework/components/modal/modal_header_title.test.js b/ui_framework/src/components/modal/modal_header_title.test.js similarity index 100% rename from ui_framework/components/modal/modal_header_title.test.js rename to ui_framework/src/components/modal/modal_header_title.test.js diff --git a/ui_framework/components/modal/modal_overlay.js b/ui_framework/src/components/modal/modal_overlay.js similarity index 100% rename from ui_framework/components/modal/modal_overlay.js rename to ui_framework/src/components/modal/modal_overlay.js diff --git a/ui_framework/components/modal/modal_overlay.test.js b/ui_framework/src/components/modal/modal_overlay.test.js similarity index 100% rename from ui_framework/components/modal/modal_overlay.test.js rename to ui_framework/src/components/modal/modal_overlay.test.js diff --git a/ui_framework/components/notice/_index.scss b/ui_framework/src/components/notice/_index.scss similarity index 100% rename from ui_framework/components/notice/_index.scss rename to ui_framework/src/components/notice/_index.scss diff --git a/ui_framework/components/notice/_notice.scss b/ui_framework/src/components/notice/_notice.scss similarity index 100% rename from ui_framework/components/notice/_notice.scss rename to ui_framework/src/components/notice/_notice.scss diff --git a/ui_framework/components/pager/__snapshots__/pager.test.js.snap b/ui_framework/src/components/pager/__snapshots__/pager.test.js.snap similarity index 100% rename from ui_framework/components/pager/__snapshots__/pager.test.js.snap rename to ui_framework/src/components/pager/__snapshots__/pager.test.js.snap diff --git a/ui_framework/components/pager/__snapshots__/pager_button_group.test.js.snap b/ui_framework/src/components/pager/__snapshots__/pager_button_group.test.js.snap similarity index 100% rename from ui_framework/components/pager/__snapshots__/pager_button_group.test.js.snap rename to ui_framework/src/components/pager/__snapshots__/pager_button_group.test.js.snap diff --git a/ui_framework/components/pager/_index.scss b/ui_framework/src/components/pager/_index.scss similarity index 100% rename from ui_framework/components/pager/_index.scss rename to ui_framework/src/components/pager/_index.scss diff --git a/ui_framework/components/pager/_pager.scss b/ui_framework/src/components/pager/_pager.scss similarity index 100% rename from ui_framework/components/pager/_pager.scss rename to ui_framework/src/components/pager/_pager.scss diff --git a/ui_framework/components/pager/index.js b/ui_framework/src/components/pager/index.js similarity index 100% rename from ui_framework/components/pager/index.js rename to ui_framework/src/components/pager/index.js diff --git a/ui_framework/components/pager/pager.js b/ui_framework/src/components/pager/pager.js similarity index 100% rename from ui_framework/components/pager/pager.js rename to ui_framework/src/components/pager/pager.js diff --git a/ui_framework/components/pager/pager.test.js b/ui_framework/src/components/pager/pager.test.js similarity index 100% rename from ui_framework/components/pager/pager.test.js rename to ui_framework/src/components/pager/pager.test.js diff --git a/ui_framework/components/pager/pager_button_group.js b/ui_framework/src/components/pager/pager_button_group.js similarity index 100% rename from ui_framework/components/pager/pager_button_group.js rename to ui_framework/src/components/pager/pager_button_group.js diff --git a/ui_framework/components/pager/pager_button_group.test.js b/ui_framework/src/components/pager/pager_button_group.test.js similarity index 100% rename from ui_framework/components/pager/pager_button_group.test.js rename to ui_framework/src/components/pager/pager_button_group.test.js diff --git a/ui_framework/components/panel/_index.scss b/ui_framework/src/components/panel/_index.scss similarity index 100% rename from ui_framework/components/panel/_index.scss rename to ui_framework/src/components/panel/_index.scss diff --git a/ui_framework/components/panel/_panel.scss b/ui_framework/src/components/panel/_panel.scss similarity index 100% rename from ui_framework/components/panel/_panel.scss rename to ui_framework/src/components/panel/_panel.scss diff --git a/ui_framework/components/popover/__snapshots__/popover.test.js.snap b/ui_framework/src/components/popover/__snapshots__/popover.test.js.snap similarity index 100% rename from ui_framework/components/popover/__snapshots__/popover.test.js.snap rename to ui_framework/src/components/popover/__snapshots__/popover.test.js.snap diff --git a/ui_framework/components/popover/_index.scss b/ui_framework/src/components/popover/_index.scss similarity index 100% rename from ui_framework/components/popover/_index.scss rename to ui_framework/src/components/popover/_index.scss diff --git a/ui_framework/components/popover/_popover.scss b/ui_framework/src/components/popover/_popover.scss similarity index 100% rename from ui_framework/components/popover/_popover.scss rename to ui_framework/src/components/popover/_popover.scss diff --git a/ui_framework/components/popover/index.js b/ui_framework/src/components/popover/index.js similarity index 100% rename from ui_framework/components/popover/index.js rename to ui_framework/src/components/popover/index.js diff --git a/ui_framework/components/popover/popover.js b/ui_framework/src/components/popover/popover.js similarity index 100% rename from ui_framework/components/popover/popover.js rename to ui_framework/src/components/popover/popover.js diff --git a/ui_framework/components/popover/popover.test.js b/ui_framework/src/components/popover/popover.test.js similarity index 100% rename from ui_framework/components/popover/popover.test.js rename to ui_framework/src/components/popover/popover.test.js diff --git a/ui_framework/components/status_text/_index.scss b/ui_framework/src/components/status_text/_index.scss similarity index 100% rename from ui_framework/components/status_text/_index.scss rename to ui_framework/src/components/status_text/_index.scss diff --git a/ui_framework/components/status_text/_status_text.scss b/ui_framework/src/components/status_text/_status_text.scss similarity index 100% rename from ui_framework/components/status_text/_status_text.scss rename to ui_framework/src/components/status_text/_status_text.scss diff --git a/ui_framework/components/table/__snapshots__/controlled_table.test.js.snap b/ui_framework/src/components/table/__snapshots__/controlled_table.test.js.snap similarity index 100% rename from ui_framework/components/table/__snapshots__/controlled_table.test.js.snap rename to ui_framework/src/components/table/__snapshots__/controlled_table.test.js.snap diff --git a/ui_framework/components/table/__snapshots__/table.test.js.snap b/ui_framework/src/components/table/__snapshots__/table.test.js.snap similarity index 100% rename from ui_framework/components/table/__snapshots__/table.test.js.snap rename to ui_framework/src/components/table/__snapshots__/table.test.js.snap diff --git a/ui_framework/components/table/__snapshots__/table_header_cell.test.js.snap b/ui_framework/src/components/table/__snapshots__/table_header_cell.test.js.snap similarity index 100% rename from ui_framework/components/table/__snapshots__/table_header_cell.test.js.snap rename to ui_framework/src/components/table/__snapshots__/table_header_cell.test.js.snap diff --git a/ui_framework/components/table/__snapshots__/table_header_check_box_cell.test.js.snap b/ui_framework/src/components/table/__snapshots__/table_header_check_box_cell.test.js.snap similarity index 100% rename from ui_framework/components/table/__snapshots__/table_header_check_box_cell.test.js.snap rename to ui_framework/src/components/table/__snapshots__/table_header_check_box_cell.test.js.snap diff --git a/ui_framework/components/table/__snapshots__/table_info.test.js.snap b/ui_framework/src/components/table/__snapshots__/table_info.test.js.snap similarity index 100% rename from ui_framework/components/table/__snapshots__/table_info.test.js.snap rename to ui_framework/src/components/table/__snapshots__/table_info.test.js.snap diff --git a/ui_framework/components/table/__snapshots__/table_row.test.js.snap b/ui_framework/src/components/table/__snapshots__/table_row.test.js.snap similarity index 100% rename from ui_framework/components/table/__snapshots__/table_row.test.js.snap rename to ui_framework/src/components/table/__snapshots__/table_row.test.js.snap diff --git a/ui_framework/components/table/__snapshots__/table_row_cell.test.js.snap b/ui_framework/src/components/table/__snapshots__/table_row_cell.test.js.snap similarity index 100% rename from ui_framework/components/table/__snapshots__/table_row_cell.test.js.snap rename to ui_framework/src/components/table/__snapshots__/table_row_cell.test.js.snap diff --git a/ui_framework/components/table/__snapshots__/table_row_check_box_cell.test.js.snap b/ui_framework/src/components/table/__snapshots__/table_row_check_box_cell.test.js.snap similarity index 100% rename from ui_framework/components/table/__snapshots__/table_row_check_box_cell.test.js.snap rename to ui_framework/src/components/table/__snapshots__/table_row_check_box_cell.test.js.snap diff --git a/ui_framework/components/table/_controlled_table.scss b/ui_framework/src/components/table/_controlled_table.scss similarity index 100% rename from ui_framework/components/table/_controlled_table.scss rename to ui_framework/src/components/table/_controlled_table.scss diff --git a/ui_framework/components/table/_index.scss b/ui_framework/src/components/table/_index.scss similarity index 100% rename from ui_framework/components/table/_index.scss rename to ui_framework/src/components/table/_index.scss diff --git a/ui_framework/components/table/_table.scss b/ui_framework/src/components/table/_table.scss similarity index 100% rename from ui_framework/components/table/_table.scss rename to ui_framework/src/components/table/_table.scss diff --git a/ui_framework/components/table/controlled_table.js b/ui_framework/src/components/table/controlled_table.js similarity index 100% rename from ui_framework/components/table/controlled_table.js rename to ui_framework/src/components/table/controlled_table.js diff --git a/ui_framework/components/table/controlled_table.test.js b/ui_framework/src/components/table/controlled_table.test.js similarity index 100% rename from ui_framework/components/table/controlled_table.test.js rename to ui_framework/src/components/table/controlled_table.test.js diff --git a/ui_framework/components/table/index.js b/ui_framework/src/components/table/index.js similarity index 100% rename from ui_framework/components/table/index.js rename to ui_framework/src/components/table/index.js diff --git a/ui_framework/components/table/table.js b/ui_framework/src/components/table/table.js similarity index 100% rename from ui_framework/components/table/table.js rename to ui_framework/src/components/table/table.js diff --git a/ui_framework/components/table/table.test.js b/ui_framework/src/components/table/table.test.js similarity index 100% rename from ui_framework/components/table/table.test.js rename to ui_framework/src/components/table/table.test.js diff --git a/ui_framework/components/table/table_body.js b/ui_framework/src/components/table/table_body.js similarity index 100% rename from ui_framework/components/table/table_body.js rename to ui_framework/src/components/table/table_body.js diff --git a/ui_framework/components/table/table_header.js b/ui_framework/src/components/table/table_header.js similarity index 100% rename from ui_framework/components/table/table_header.js rename to ui_framework/src/components/table/table_header.js diff --git a/ui_framework/components/table/table_header_cell.js b/ui_framework/src/components/table/table_header_cell.js similarity index 100% rename from ui_framework/components/table/table_header_cell.js rename to ui_framework/src/components/table/table_header_cell.js diff --git a/ui_framework/components/table/table_header_cell.test.js b/ui_framework/src/components/table/table_header_cell.test.js similarity index 100% rename from ui_framework/components/table/table_header_cell.test.js rename to ui_framework/src/components/table/table_header_cell.test.js diff --git a/ui_framework/components/table/table_header_check_box_cell.js b/ui_framework/src/components/table/table_header_check_box_cell.js similarity index 100% rename from ui_framework/components/table/table_header_check_box_cell.js rename to ui_framework/src/components/table/table_header_check_box_cell.js diff --git a/ui_framework/components/table/table_header_check_box_cell.test.js b/ui_framework/src/components/table/table_header_check_box_cell.test.js similarity index 100% rename from ui_framework/components/table/table_header_check_box_cell.test.js rename to ui_framework/src/components/table/table_header_check_box_cell.test.js diff --git a/ui_framework/components/table/table_info.js b/ui_framework/src/components/table/table_info.js similarity index 100% rename from ui_framework/components/table/table_info.js rename to ui_framework/src/components/table/table_info.js diff --git a/ui_framework/components/table/table_info.test.js b/ui_framework/src/components/table/table_info.test.js similarity index 100% rename from ui_framework/components/table/table_info.test.js rename to ui_framework/src/components/table/table_info.test.js diff --git a/ui_framework/components/table/table_row.js b/ui_framework/src/components/table/table_row.js similarity index 100% rename from ui_framework/components/table/table_row.js rename to ui_framework/src/components/table/table_row.js diff --git a/ui_framework/components/table/table_row.test.js b/ui_framework/src/components/table/table_row.test.js similarity index 100% rename from ui_framework/components/table/table_row.test.js rename to ui_framework/src/components/table/table_row.test.js diff --git a/ui_framework/components/table/table_row_cell.js b/ui_framework/src/components/table/table_row_cell.js similarity index 100% rename from ui_framework/components/table/table_row_cell.js rename to ui_framework/src/components/table/table_row_cell.js diff --git a/ui_framework/components/table/table_row_cell.test.js b/ui_framework/src/components/table/table_row_cell.test.js similarity index 100% rename from ui_framework/components/table/table_row_cell.test.js rename to ui_framework/src/components/table/table_row_cell.test.js diff --git a/ui_framework/components/table/table_row_check_box_cell.js b/ui_framework/src/components/table/table_row_check_box_cell.js similarity index 100% rename from ui_framework/components/table/table_row_check_box_cell.js rename to ui_framework/src/components/table/table_row_check_box_cell.js diff --git a/ui_framework/components/table/table_row_check_box_cell.test.js b/ui_framework/src/components/table/table_row_check_box_cell.test.js similarity index 100% rename from ui_framework/components/table/table_row_check_box_cell.test.js rename to ui_framework/src/components/table/table_row_check_box_cell.test.js diff --git a/ui_framework/components/table_info/_index.scss b/ui_framework/src/components/table_info/_index.scss similarity index 100% rename from ui_framework/components/table_info/_index.scss rename to ui_framework/src/components/table_info/_index.scss diff --git a/ui_framework/components/table_info/_table_info.scss b/ui_framework/src/components/table_info/_table_info.scss similarity index 100% rename from ui_framework/components/table_info/_table_info.scss rename to ui_framework/src/components/table_info/_table_info.scss diff --git a/ui_framework/components/tabs/__snapshots__/tab.test.js.snap b/ui_framework/src/components/tabs/__snapshots__/tab.test.js.snap similarity index 100% rename from ui_framework/components/tabs/__snapshots__/tab.test.js.snap rename to ui_framework/src/components/tabs/__snapshots__/tab.test.js.snap diff --git a/ui_framework/components/tabs/__snapshots__/tabs.test.js.snap b/ui_framework/src/components/tabs/__snapshots__/tabs.test.js.snap similarity index 100% rename from ui_framework/components/tabs/__snapshots__/tabs.test.js.snap rename to ui_framework/src/components/tabs/__snapshots__/tabs.test.js.snap diff --git a/ui_framework/components/tabs/_index.scss b/ui_framework/src/components/tabs/_index.scss similarity index 100% rename from ui_framework/components/tabs/_index.scss rename to ui_framework/src/components/tabs/_index.scss diff --git a/ui_framework/components/tabs/_tabs.scss b/ui_framework/src/components/tabs/_tabs.scss similarity index 100% rename from ui_framework/components/tabs/_tabs.scss rename to ui_framework/src/components/tabs/_tabs.scss diff --git a/ui_framework/components/tabs/index.js b/ui_framework/src/components/tabs/index.js similarity index 100% rename from ui_framework/components/tabs/index.js rename to ui_framework/src/components/tabs/index.js diff --git a/ui_framework/components/tabs/tab.js b/ui_framework/src/components/tabs/tab.js similarity index 100% rename from ui_framework/components/tabs/tab.js rename to ui_framework/src/components/tabs/tab.js diff --git a/ui_framework/components/tabs/tab.test.js b/ui_framework/src/components/tabs/tab.test.js similarity index 100% rename from ui_framework/components/tabs/tab.test.js rename to ui_framework/src/components/tabs/tab.test.js diff --git a/ui_framework/components/tabs/tabs.js b/ui_framework/src/components/tabs/tabs.js similarity index 100% rename from ui_framework/components/tabs/tabs.js rename to ui_framework/src/components/tabs/tabs.js diff --git a/ui_framework/components/tabs/tabs.test.js b/ui_framework/src/components/tabs/tabs.test.js similarity index 100% rename from ui_framework/components/tabs/tabs.test.js rename to ui_framework/src/components/tabs/tabs.test.js diff --git a/ui_framework/components/toggle_button/_index.scss b/ui_framework/src/components/toggle_button/_index.scss similarity index 100% rename from ui_framework/components/toggle_button/_index.scss rename to ui_framework/src/components/toggle_button/_index.scss diff --git a/ui_framework/components/toggle_button/_toggle_button.scss b/ui_framework/src/components/toggle_button/_toggle_button.scss similarity index 100% rename from ui_framework/components/toggle_button/_toggle_button.scss rename to ui_framework/src/components/toggle_button/_toggle_button.scss diff --git a/ui_framework/components/toggle_button/_toggle_panel.scss b/ui_framework/src/components/toggle_button/_toggle_panel.scss similarity index 100% rename from ui_framework/components/toggle_button/_toggle_panel.scss rename to ui_framework/src/components/toggle_button/_toggle_panel.scss diff --git a/ui_framework/components/tool_bar/__snapshots__/tool_bar.test.js.snap b/ui_framework/src/components/tool_bar/__snapshots__/tool_bar.test.js.snap similarity index 100% rename from ui_framework/components/tool_bar/__snapshots__/tool_bar.test.js.snap rename to ui_framework/src/components/tool_bar/__snapshots__/tool_bar.test.js.snap diff --git a/ui_framework/components/tool_bar/__snapshots__/tool_bar_footer.test.js.snap b/ui_framework/src/components/tool_bar/__snapshots__/tool_bar_footer.test.js.snap similarity index 100% rename from ui_framework/components/tool_bar/__snapshots__/tool_bar_footer.test.js.snap rename to ui_framework/src/components/tool_bar/__snapshots__/tool_bar_footer.test.js.snap diff --git a/ui_framework/components/tool_bar/__snapshots__/tool_bar_footer_section.test.js.snap b/ui_framework/src/components/tool_bar/__snapshots__/tool_bar_footer_section.test.js.snap similarity index 100% rename from ui_framework/components/tool_bar/__snapshots__/tool_bar_footer_section.test.js.snap rename to ui_framework/src/components/tool_bar/__snapshots__/tool_bar_footer_section.test.js.snap diff --git a/ui_framework/components/tool_bar/__snapshots__/tool_bar_search_box.test.js.snap b/ui_framework/src/components/tool_bar/__snapshots__/tool_bar_search_box.test.js.snap similarity index 100% rename from ui_framework/components/tool_bar/__snapshots__/tool_bar_search_box.test.js.snap rename to ui_framework/src/components/tool_bar/__snapshots__/tool_bar_search_box.test.js.snap diff --git a/ui_framework/components/tool_bar/__snapshots__/tool_bar_section.test.js.snap b/ui_framework/src/components/tool_bar/__snapshots__/tool_bar_section.test.js.snap similarity index 100% rename from ui_framework/components/tool_bar/__snapshots__/tool_bar_section.test.js.snap rename to ui_framework/src/components/tool_bar/__snapshots__/tool_bar_section.test.js.snap diff --git a/ui_framework/components/tool_bar/__snapshots__/tool_bar_text.test.js.snap b/ui_framework/src/components/tool_bar/__snapshots__/tool_bar_text.test.js.snap similarity index 100% rename from ui_framework/components/tool_bar/__snapshots__/tool_bar_text.test.js.snap rename to ui_framework/src/components/tool_bar/__snapshots__/tool_bar_text.test.js.snap diff --git a/ui_framework/components/tool_bar/_index.scss b/ui_framework/src/components/tool_bar/_index.scss similarity index 100% rename from ui_framework/components/tool_bar/_index.scss rename to ui_framework/src/components/tool_bar/_index.scss diff --git a/ui_framework/components/tool_bar/_tool_bar.scss b/ui_framework/src/components/tool_bar/_tool_bar.scss similarity index 100% rename from ui_framework/components/tool_bar/_tool_bar.scss rename to ui_framework/src/components/tool_bar/_tool_bar.scss diff --git a/ui_framework/components/tool_bar/_tool_bar_footer.scss b/ui_framework/src/components/tool_bar/_tool_bar_footer.scss similarity index 100% rename from ui_framework/components/tool_bar/_tool_bar_footer.scss rename to ui_framework/src/components/tool_bar/_tool_bar_footer.scss diff --git a/ui_framework/components/tool_bar/_tool_bar_search.scss b/ui_framework/src/components/tool_bar/_tool_bar_search.scss similarity index 100% rename from ui_framework/components/tool_bar/_tool_bar_search.scss rename to ui_framework/src/components/tool_bar/_tool_bar_search.scss diff --git a/ui_framework/components/tool_bar/_tool_bar_text.scss b/ui_framework/src/components/tool_bar/_tool_bar_text.scss similarity index 100% rename from ui_framework/components/tool_bar/_tool_bar_text.scss rename to ui_framework/src/components/tool_bar/_tool_bar_text.scss diff --git a/ui_framework/components/tool_bar/index.js b/ui_framework/src/components/tool_bar/index.js similarity index 100% rename from ui_framework/components/tool_bar/index.js rename to ui_framework/src/components/tool_bar/index.js diff --git a/ui_framework/components/tool_bar/tool_bar.js b/ui_framework/src/components/tool_bar/tool_bar.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar.js rename to ui_framework/src/components/tool_bar/tool_bar.js diff --git a/ui_framework/components/tool_bar/tool_bar.test.js b/ui_framework/src/components/tool_bar/tool_bar.test.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar.test.js rename to ui_framework/src/components/tool_bar/tool_bar.test.js diff --git a/ui_framework/components/tool_bar/tool_bar_footer.js b/ui_framework/src/components/tool_bar/tool_bar_footer.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar_footer.js rename to ui_framework/src/components/tool_bar/tool_bar_footer.js diff --git a/ui_framework/components/tool_bar/tool_bar_footer.test.js b/ui_framework/src/components/tool_bar/tool_bar_footer.test.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar_footer.test.js rename to ui_framework/src/components/tool_bar/tool_bar_footer.test.js diff --git a/ui_framework/components/tool_bar/tool_bar_footer_section.js b/ui_framework/src/components/tool_bar/tool_bar_footer_section.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar_footer_section.js rename to ui_framework/src/components/tool_bar/tool_bar_footer_section.js diff --git a/ui_framework/components/tool_bar/tool_bar_footer_section.test.js b/ui_framework/src/components/tool_bar/tool_bar_footer_section.test.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar_footer_section.test.js rename to ui_framework/src/components/tool_bar/tool_bar_footer_section.test.js diff --git a/ui_framework/components/tool_bar/tool_bar_search_box.js b/ui_framework/src/components/tool_bar/tool_bar_search_box.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar_search_box.js rename to ui_framework/src/components/tool_bar/tool_bar_search_box.js diff --git a/ui_framework/components/tool_bar/tool_bar_search_box.test.js b/ui_framework/src/components/tool_bar/tool_bar_search_box.test.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar_search_box.test.js rename to ui_framework/src/components/tool_bar/tool_bar_search_box.test.js diff --git a/ui_framework/components/tool_bar/tool_bar_section.js b/ui_framework/src/components/tool_bar/tool_bar_section.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar_section.js rename to ui_framework/src/components/tool_bar/tool_bar_section.js diff --git a/ui_framework/components/tool_bar/tool_bar_section.test.js b/ui_framework/src/components/tool_bar/tool_bar_section.test.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar_section.test.js rename to ui_framework/src/components/tool_bar/tool_bar_section.test.js diff --git a/ui_framework/components/tool_bar/tool_bar_text.js b/ui_framework/src/components/tool_bar/tool_bar_text.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar_text.js rename to ui_framework/src/components/tool_bar/tool_bar_text.js diff --git a/ui_framework/components/tool_bar/tool_bar_text.test.js b/ui_framework/src/components/tool_bar/tool_bar_text.test.js similarity index 100% rename from ui_framework/components/tool_bar/tool_bar_text.test.js rename to ui_framework/src/components/tool_bar/tool_bar_text.test.js diff --git a/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap b/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap new file mode 100644 index 0000000000000..7ba379ea5a622 --- /dev/null +++ b/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`KuiText is rendered 1`] = ` +

+ Hello +

+`; + +exports[`KuiTitle is rendered 1`] = ` +

+ Hello +

+`; + +exports[`KuiTitle renders size large 1`] = ` +

+ Hello +

+`; + +exports[`KuiTitle renders size small 1`] = ` +

+ Hello +

+`; diff --git a/ui_framework/components/typography/_index.scss b/ui_framework/src/components/typography/_index.scss similarity index 100% rename from ui_framework/components/typography/_index.scss rename to ui_framework/src/components/typography/_index.scss diff --git a/ui_framework/components/typography/_typography.scss b/ui_framework/src/components/typography/_typography.scss similarity index 100% rename from ui_framework/components/typography/_typography.scss rename to ui_framework/src/components/typography/_typography.scss diff --git a/ui_framework/src/components/typography/typography.js b/ui_framework/src/components/typography/typography.js new file mode 100644 index 0000000000000..1e13bbed7588b --- /dev/null +++ b/ui_framework/src/components/typography/typography.js @@ -0,0 +1,43 @@ +import { + cloneElement, + PropTypes, +} from 'react'; +import classNames from 'classnames'; + +const sizeToClassNameMap = { + small: 'kuiTitle--small', + large: 'kuiTitle--large', +}; + +export const SIZES = Object.keys(sizeToClassNameMap); + +export const KuiTitle = ({ size, children, className, ...rest }) => { + const classes = classNames('kuiTitle', sizeToClassNameMap[size], className); + + const props = { + className: classes, + ...rest, + }; + + return cloneElement(children, props); +}; + +KuiTitle.PropTypes = { + children: PropTypes.node.isRequired, + size: PropTypes.oneOf(SIZES), +}; + +export const KuiText = ({ children, className, ...rest }) => { + const classes = classNames('kuiText', className); + + const props = { + className: classes, + ...rest, + }; + + return cloneElement(children, props); +}; + +KuiText.PropTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/ui_framework/src/components/typography/typography.test.js b/ui_framework/src/components/typography/typography.test.js new file mode 100644 index 0000000000000..4e2d0959e54f0 --- /dev/null +++ b/ui_framework/src/components/typography/typography.test.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { + KuiTitle, + KuiText, + SIZES, +} from './typography'; + +describe('KuiTitle', () => { + test('is rendered', () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); + + describe('renders size', () => { + SIZES.forEach(size => { + test(size, () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); + }); + }); +}); + +describe('KuiText', () => { + test('is rendered', () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/ui_framework/components/vertical_rhythm/_index.scss b/ui_framework/src/components/vertical_rhythm/_index.scss similarity index 100% rename from ui_framework/components/vertical_rhythm/_index.scss rename to ui_framework/src/components/vertical_rhythm/_index.scss diff --git a/ui_framework/components/vertical_rhythm/_vertical_rhythm.scss b/ui_framework/src/components/vertical_rhythm/_vertical_rhythm.scss similarity index 100% rename from ui_framework/components/vertical_rhythm/_vertical_rhythm.scss rename to ui_framework/src/components/vertical_rhythm/_vertical_rhythm.scss diff --git a/ui_framework/components/view/_index.scss b/ui_framework/src/components/view/_index.scss similarity index 100% rename from ui_framework/components/view/_index.scss rename to ui_framework/src/components/view/_index.scss diff --git a/ui_framework/components/view/_view.scss b/ui_framework/src/components/view/_view.scss similarity index 100% rename from ui_framework/components/view/_view.scss rename to ui_framework/src/components/view/_view.scss diff --git a/ui_framework/components/_mixins.scss b/ui_framework/src/global_styling/mixins/_global_mixins.scss similarity index 100% rename from ui_framework/components/_mixins.scss rename to ui_framework/src/global_styling/mixins/_global_mixins.scss diff --git a/ui_framework/src/global_styling/mixins/_index.scss b/ui_framework/src/global_styling/mixins/_index.scss new file mode 100644 index 0000000000000..5950979c93d70 --- /dev/null +++ b/ui_framework/src/global_styling/mixins/_index.scss @@ -0,0 +1 @@ +@import 'global_mixins'; diff --git a/ui_framework/src/global_styling/reset/_index.scss b/ui_framework/src/global_styling/reset/_index.scss new file mode 100644 index 0000000000000..defff1d55c679 --- /dev/null +++ b/ui_framework/src/global_styling/reset/_index.scss @@ -0,0 +1 @@ +@import "reset"; diff --git a/ui_framework/components/_common_styles.scss b/ui_framework/src/global_styling/reset/_reset.scss similarity index 100% rename from ui_framework/components/_common_styles.scss rename to ui_framework/src/global_styling/reset/_reset.scss diff --git a/ui_framework/doc_site/src/views/button/button_small.js b/ui_framework/src/global_styling/utilities/_index.scss similarity index 100% rename from ui_framework/doc_site/src/views/button/button_small.js rename to ui_framework/src/global_styling/utilities/_index.scss diff --git a/ui_framework/src/global_styling/variables/_animations.scss b/ui_framework/src/global_styling/variables/_animations.scss new file mode 100644 index 0000000000000..7e0a4fca9d63b --- /dev/null +++ b/ui_framework/src/global_styling/variables/_animations.scss @@ -0,0 +1,9 @@ +// Animations + +$globalAnimSlightBounce: cubic-bezier(0.34,1.61,0.7,1); +$globalAnimSlightResistance: cubic-bezier(0.694, 0.0482, 0.335, 1); +$globalAnimSpeedVeryFast: 90ms; +$globalAnimSpeedFast: 150ms; +$globalAnimSpeedNormal: 250ms; +$globalAnimSpeedSlow: 350ms; +$globalAnimSpeedVerySlow: 500ms; diff --git a/ui_framework/src/global_styling/variables/_borders.scss b/ui_framework/src/global_styling/variables/_borders.scss new file mode 100644 index 0000000000000..91c8776f5a9e0 --- /dev/null +++ b/ui_framework/src/global_styling/variables/_borders.scss @@ -0,0 +1,6 @@ +// Borders + +$globalBorderColor: $globalColorLightGray; +$globalBorderRadius: 4px; +$globalBorderThick: 2px solid $globalBorderColor; +$globalBorderThin: 1px solid $globalBorderColor; diff --git a/ui_framework/src/global_styling/variables/_colors.scss b/ui_framework/src/global_styling/variables/_colors.scss new file mode 100644 index 0000000000000..adf001d2348b1 --- /dev/null +++ b/ui_framework/src/global_styling/variables/_colors.scss @@ -0,0 +1,49 @@ +// True colors + +$globalColorBlue: #0079a5; +$globalColorTeal: #00A69B; +$globalColorRed: #A30000; +$globalColorLightestGray: #F5F5F5; +$globalColorLightGray: #D9D9D9; +$globalColorMediumGray: #999; +$globalColorDarkGray: #666; +$globalColorDarkestGray: #3F3F3F; +$globalColorBlack: #000; +$globalColorWhite: #FFF; + +// Normal colors + +$globalTextColor: #2d2d2d; +$globalLinkColor: $globalColorBlue; +$globalLinkColor-isHover: darken($globalLinkColor, 10%); +$globalInputTextColor: $globalTextColor; +$globalInputBackgroundColor: $globalColorWhite; +$globalInputBorderColor: $globalColorLightGray; + +// Dark theme colors + +$globalTextColor--darkTheme: #cecece; +$globalBackgroundColor--darkTheme: #777777; +$globalLinkColor--darkTheme: #b7e2ea; +$globalLinkColor-isHover--darkTheme: #def2f6; +$globalInputTextColor--darkTheme: $globalTextColor--darkTheme; +$globalInputBackgroundColor--darkTheme: #444444; +$globalInputBorderColor--darkTheme: $globalInputBackgroundColor--darkTheme; + +// Colors + +$globalInfoColor: #3fa8c7; +$globalInactiveColor: #c3c3c3; +$globalSuccessColor: #417505; +$globalWarningColor: #ec9800; +$globalDangerColor: $globalColorRed; +$globalFocusColor: $globalColorBlue; +$globalFocusDangerColor: #ff523c; +$globalFocusWarningColor: #ffa500; +$globalFocusBackgroundColor: #ffffff; +$globalFontColor: #191E23; +$globalSubduedTextColor: $globalColorDarkGray; +$globalLinkHoverColor: #006E8A; +$globalSelectedBorderColor: $globalColorBlue; +$globalDangerBorderColor: $globalDangerColor; +$globalFormControlBorderColor: #DEDEDE; diff --git a/ui_framework/src/global_styling/variables/_font.scss b/ui_framework/src/global_styling/variables/_font.scss new file mode 100644 index 0000000000000..686e242bca947 --- /dev/null +++ b/ui_framework/src/global_styling/variables/_font.scss @@ -0,0 +1,9 @@ +// Font + +$globalFontFamily: "Open Sans", Helvetica, Arial, sans-serif; +$globalFontSize: 14px; +$globalLineHeight: 1.5; +$globalSubTextFontSize: 12px; +$globalTitleFontSize: 18px; +$globalFontWeightRegular: 400; +$globalFontWeightBold: 700; diff --git a/ui_framework/src/global_styling/variables/_form.scss b/ui_framework/src/global_styling/variables/_form.scss new file mode 100644 index 0000000000000..442793e73aeed --- /dev/null +++ b/ui_framework/src/global_styling/variables/_form.scss @@ -0,0 +1,6 @@ +$globalFormControlHorizontalPadding: 12px; +$globalFormControlPadding: 3px $globalFormControlHorizontalPadding 4px; +$globalFormInputHeight: 30px; +$globalFormFieldDefaultWidth: 180px; +$globalFormFieldSmallWidth: 60px; +$globalFormFieldLargeWidth: 400px; diff --git a/ui_framework/src/global_styling/variables/_index.scss b/ui_framework/src/global_styling/variables/_index.scss new file mode 100644 index 0000000000000..9012651853b51 --- /dev/null +++ b/ui_framework/src/global_styling/variables/_index.scss @@ -0,0 +1,17 @@ +// -------------------------------------------------------------------------------------- +// KUI global variables +// -------------------------------------------------------------------------------------- +// This module contains all global variables available within kui. Every variable in this +// document should be prefixed with $global. This lets us know where the variable is +// coming from when looking inside the individual component files. Any component local +// variables should be declared at the top of those documents prefixed with $componentName. + +@import 'colors'; +@import 'font'; +@import 'timing'; +@import 'borders'; +@import 'shadows'; +@import 'z_index'; +@import 'animations'; +@import 'form'; +@import 'tool_bar'; diff --git a/ui_framework/src/global_styling/variables/_shadows.scss b/ui_framework/src/global_styling/variables/_shadows.scss new file mode 100644 index 0000000000000..9825e5581e542 --- /dev/null +++ b/ui_framework/src/global_styling/variables/_shadows.scss @@ -0,0 +1,3 @@ +// Shadows + +$globalBoxShadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); diff --git a/ui_framework/src/global_styling/variables/_timing.scss b/ui_framework/src/global_styling/variables/_timing.scss new file mode 100644 index 0000000000000..64c642f9a6e45 --- /dev/null +++ b/ui_framework/src/global_styling/variables/_timing.scss @@ -0,0 +1,3 @@ +// Timing + +$globalInputTransitionTiming: 0.1s linear; diff --git a/ui_framework/src/global_styling/variables/_tool_bar.scss b/ui_framework/src/global_styling/variables/_tool_bar.scss new file mode 100644 index 0000000000000..7963b83d2b871 --- /dev/null +++ b/ui_framework/src/global_styling/variables/_tool_bar.scss @@ -0,0 +1,4 @@ +$toolBarHeight: 50px; +$toolBarPadding: 10px; +$toolBarSectionSpacing: 50px; +$toolBarItsemSpacing: 10px; diff --git a/ui_framework/src/global_styling/variables/_z_index.scss b/ui_framework/src/global_styling/variables/_z_index.scss new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/ui_framework/src/index.scss b/ui_framework/src/index.scss new file mode 100644 index 0000000000000..ec4b0ad6f37ec --- /dev/null +++ b/ui_framework/src/index.scss @@ -0,0 +1,11 @@ +// Configuration +@import 'global_styling/variables/index'; +@import 'themes/light_theme/index'; + +// Core +@import 'global_styling/mixins/index'; +@import 'global_styling/reset/index'; +@import 'global_styling/utilities/index'; + +// Components +@import 'components/index'; diff --git a/ui_framework/services/accessibility/accessible_click_keys.js b/ui_framework/src/services/accessibility/accessible_click_keys.js similarity index 100% rename from ui_framework/services/accessibility/accessible_click_keys.js rename to ui_framework/src/services/accessibility/accessible_click_keys.js diff --git a/ui_framework/services/accessibility/combo_box_key_codes.js b/ui_framework/src/services/accessibility/combo_box_key_codes.js similarity index 100% rename from ui_framework/services/accessibility/combo_box_key_codes.js rename to ui_framework/src/services/accessibility/combo_box_key_codes.js diff --git a/ui_framework/services/accessibility/index.js b/ui_framework/src/services/accessibility/index.js similarity index 100% rename from ui_framework/services/accessibility/index.js rename to ui_framework/src/services/accessibility/index.js diff --git a/ui_framework/services/alignment.js b/ui_framework/src/services/alignment.js similarity index 100% rename from ui_framework/services/alignment.js rename to ui_framework/src/services/alignment.js diff --git a/ui_framework/src/services/index.js b/ui_framework/src/services/index.js new file mode 100644 index 0000000000000..ba63715c0a268 --- /dev/null +++ b/ui_framework/src/services/index.js @@ -0,0 +1,11 @@ +export { + accessibleClickKeys, + comboBoxKeyCodes, + ENTER_KEY, + SPACE_KEY, +} from './accessibility'; + +export { SortableProperties } from './sort'; +export { ESC_KEY_CODE } from './key_codes'; + +export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment'; diff --git a/ui_framework/services/key_codes.js b/ui_framework/src/services/key_codes.js similarity index 100% rename from ui_framework/services/key_codes.js rename to ui_framework/src/services/key_codes.js diff --git a/ui_framework/services/sort/index.js b/ui_framework/src/services/sort/index.js similarity index 100% rename from ui_framework/services/sort/index.js rename to ui_framework/src/services/sort/index.js diff --git a/ui_framework/services/sort/sortable_properties.js b/ui_framework/src/services/sort/sortable_properties.js similarity index 100% rename from ui_framework/services/sort/sortable_properties.js rename to ui_framework/src/services/sort/sortable_properties.js diff --git a/ui_framework/services/sort/sortable_properties.test.js b/ui_framework/src/services/sort/sortable_properties.test.js similarity index 99% rename from ui_framework/services/sort/sortable_properties.test.js rename to ui_framework/src/services/sort/sortable_properties.test.js index 2d6c80aa0099c..e0f4bb2b21b7e 100644 --- a/ui_framework/services/sort/sortable_properties.test.js +++ b/ui_framework/src/services/sort/sortable_properties.test.js @@ -1,4 +1,3 @@ -import _ from 'lodash'; import { SortableProperties, } from './sortable_properties'; diff --git a/ui_framework/test/required_props.js b/ui_framework/src/test/required_props.js similarity index 100% rename from ui_framework/test/required_props.js rename to ui_framework/src/test/required_props.js diff --git a/ui_framework/src/themes/light_theme/_index.scss b/ui_framework/src/themes/light_theme/_index.scss new file mode 100644 index 0000000000000..e69de29bb2d1d