playbook_ui_docs 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY2127dropdowncloseonselectionpropreact8006
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +5 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx +62 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.jsx +82 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +66 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb +137 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb +40 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.jsx → _advanced_table_selectable_rows_no_subrows_react.jsx} +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +9 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -2
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +2 -48
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +22 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.jsx +42 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +31 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +56 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +58 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +19 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +20 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +57 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +50 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +105 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +22 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +67 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +11 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +33 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +3 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +20 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +8 -2
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb +1 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx +41 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
- data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +11 -11
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.html.erb +4 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.jsx +15 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +4 -3
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb +12 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.jsx +31 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +3 -51
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx +23 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
- data/dist/playbook-doc.js +2 -2
- metadata +74 -15
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +0 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.html.erb → _advanced_table_selectable_rows_no_subrows_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
@@ -0,0 +1,52 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{
|
4
|
+
label: "United States",
|
5
|
+
value: "United States",
|
6
|
+
areaCode: "+1",
|
7
|
+
icon: "🇺🇸",
|
8
|
+
id: "us"
|
9
|
+
},
|
10
|
+
{
|
11
|
+
label: "United Kingdom",
|
12
|
+
value: "United Kingdom",
|
13
|
+
areaCode: "+44",
|
14
|
+
icon: "🇬🇧",
|
15
|
+
id: "gb"
|
16
|
+
},
|
17
|
+
{
|
18
|
+
label: "Pakistan",
|
19
|
+
value: "Pakistan",
|
20
|
+
areaCode: "+92",
|
21
|
+
icon: "🇵🇰",
|
22
|
+
id: "pk"
|
23
|
+
}
|
24
|
+
]
|
25
|
+
|
26
|
+
%>
|
27
|
+
|
28
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
29
|
+
<%= pb_rails("dropdown/dropdown_trigger") do %>
|
30
|
+
<%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
|
31
|
+
<% end %>
|
32
|
+
<%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs", searchbar: true}) do %>
|
33
|
+
<% options.each do |option| %>
|
34
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
35
|
+
<%= pb_rails("flex", props: {
|
36
|
+
align: "center",
|
37
|
+
justify: "between",
|
38
|
+
}) do %>
|
39
|
+
<%= pb_rails("flex/flex_item") do %>
|
40
|
+
<%= pb_rails("flex") do %>
|
41
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
42
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
43
|
+
<% end %>
|
44
|
+
<% end %>
|
45
|
+
<%= pb_rails("flex/flex_item") do %>
|
46
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
47
|
+
<% end %>
|
48
|
+
<% end %>
|
49
|
+
<% end %>
|
50
|
+
<% end %>
|
51
|
+
<% end %>
|
52
|
+
<% end %>
|
@@ -1,34 +1,49 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
|
-
-
|
3
|
+
- dropdown_default_rails: Default
|
4
|
+
- dropdown_with_autocomplete: Autocomplete
|
5
|
+
- dropdown_multi_select_rails: Multi Select
|
6
|
+
- dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
|
7
|
+
- dropdown_multi_select_display_rails: Multi Select with Form Pill Props
|
4
8
|
- dropdown_subtle_variant: Subtle Variant
|
5
9
|
- dropdown_subcomponent_structure_rails: Subcomponent Structure
|
10
|
+
- dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
|
6
11
|
- dropdown_with_label: With Label
|
7
12
|
- dropdown_with_custom_options_rails: Custom Options
|
13
|
+
- dropdown_multi_select_with_custom_options: Multi Select with Custom Options
|
8
14
|
- dropdown_with_custom_display_rails: Custom Display
|
9
15
|
- dropdown_with_custom_trigger_rails: Custom Trigger
|
16
|
+
- dropdown_with_search_rails: Custom Trigger Dropdown with Search
|
10
17
|
- dropdown_with_custom_padding: Custom Option Padding
|
11
18
|
- dropdown_error: Dropdown with Error
|
12
19
|
- dropdown_default_value: Default Value
|
20
|
+
- dropdown_multi_select_with_default: Multi Select Default Value
|
13
21
|
- dropdown_blank_selection: Blank Selection
|
14
22
|
- dropdown_separators_hidden: Separators Hidden
|
15
23
|
|
16
24
|
react:
|
17
25
|
- dropdown_default: Default
|
26
|
+
- dropdown_with_autocomplete: Autocomplete
|
27
|
+
- dropdown_multi_select: Multi Select
|
28
|
+
- dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
|
29
|
+
- dropdown_multi_select_display: Multi Select with Form Pill Props
|
18
30
|
- dropdown_subtle_variant: Subtle Variant
|
19
31
|
- dropdown_subcomponent_structure: Subcomponent Structure
|
32
|
+
- dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
|
20
33
|
- dropdown_with_label: With Label
|
21
34
|
- dropdown_with_custom_options: Custom Options
|
35
|
+
- dropdown_multi_select_with_custom_options: Multi Select with Custom Options
|
22
36
|
- dropdown_with_custom_display: Custom Display
|
23
37
|
- dropdown_with_custom_trigger: Custom Trigger
|
38
|
+
- dropdown_with_search: Custom Trigger Dropdown with Search
|
24
39
|
- dropdown_with_custom_padding: Custom Option Padding
|
25
40
|
- dropdown_error: Dropdown with Error
|
26
41
|
- dropdown_default_value: Default Value
|
42
|
+
- dropdown_multi_select_with_default: Multi Select Default Value
|
27
43
|
- dropdown_blank_selection: Blank Selection
|
28
44
|
- dropdown_clear_selection: Clear Selection
|
29
45
|
- dropdown_separators_hidden: Separators Hidden
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
# - dropdown_with_hook: useDropdown Hook with Any Trigger
|
46
|
+
- dropdown_with_external_control: useDropdown Hook
|
47
|
+
- dropdown_close_on_select: Close On Selection
|
48
|
+
|
34
49
|
|
@@ -3,11 +3,10 @@ export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_di
|
|
3
3
|
export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
|
4
4
|
export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
|
5
5
|
export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
|
6
|
-
export { default as
|
6
|
+
export { default as DropdownWithAutocompleteWithSubcomponents } from './_dropdown_with_autocomplete_with_subcomponents.jsx'
|
7
7
|
export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
|
8
8
|
export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
|
9
9
|
export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
|
10
|
-
export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
|
11
10
|
export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
|
12
11
|
export { default as DropdownError } from './_dropdown_error.jsx'
|
13
12
|
export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
|
@@ -15,3 +14,10 @@ export { default as DropdownBlankSelection } from './_dropdown_blank_selection.j
|
|
15
14
|
export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
|
16
15
|
export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
|
17
16
|
export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
|
17
|
+
export {default as DropdownWithSearch} from './_dropdown_with_search.jsx'
|
18
|
+
export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
|
19
|
+
export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
|
20
|
+
export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
|
21
|
+
export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
|
22
|
+
export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
|
23
|
+
export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'
|
@@ -0,0 +1,27 @@
|
|
1
|
+
<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
|
2
|
+
<%= pb_rails("empty_state", props: {
|
3
|
+
description: "Body text goes into detail with possible steps for user to take",
|
4
|
+
header: "Title Explains",
|
5
|
+
image: "default",
|
6
|
+
primary_button: "Next Action",
|
7
|
+
primary_button_url: "#primary_button_url",
|
8
|
+
alignment: "left",
|
9
|
+
}) %>
|
10
|
+
|
11
|
+
<%= pb_rails("empty_state", props: {
|
12
|
+
description: "Body text goes into detail with possible steps for user to take",
|
13
|
+
header: "Title Explains",
|
14
|
+
image: "default",
|
15
|
+
primary_button: "Next Action",
|
16
|
+
primary_button_url: "#primary_button_url",
|
17
|
+
}) %>
|
18
|
+
|
19
|
+
<%= pb_rails("empty_state", props: {
|
20
|
+
description: "Body text goes into detail with possible steps for user to take",
|
21
|
+
header: "Title Explains",
|
22
|
+
image: "default",
|
23
|
+
primary_button: "Next Action",
|
24
|
+
primary_button_url: "#primary_button_url",
|
25
|
+
alignment: "right",
|
26
|
+
}) %>
|
27
|
+
<% end %>
|
@@ -0,0 +1,12 @@
|
|
1
|
+
<%= pb_rails("flex", props: {align: "center", justify: "center", wrap: true}) do %>
|
2
|
+
<%= pb_rails("empty_state", props: {
|
3
|
+
description: "Body text goes into detail with possible steps for user to take",
|
4
|
+
header: "Title Explains",
|
5
|
+
image: "default",
|
6
|
+
orientation:"horizontal",
|
7
|
+
alignment: "left",
|
8
|
+
size: "lg",
|
9
|
+
primary_button: "Next Action",
|
10
|
+
primary_button_url: "#primary_button_url",
|
11
|
+
}) %>
|
12
|
+
<% end %>
|
@@ -0,0 +1,23 @@
|
|
1
|
+
<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
|
2
|
+
<%= pb_rails("empty_state", props: {
|
3
|
+
description: "Body text goes into detail with possible steps for user to take",
|
4
|
+
header: "Title Explains",
|
5
|
+
image: "default",
|
6
|
+
primary_button: "Next Action",
|
7
|
+
primary_button_url: "#primary_button_url",
|
8
|
+
link_button: "Alt Action",
|
9
|
+
link_button_url: "#link_button_url",
|
10
|
+
size: "sm",
|
11
|
+
}) %>
|
12
|
+
|
13
|
+
<%= pb_rails("empty_state", props: {
|
14
|
+
description: "Body text goes into detail with possible steps for user to take",
|
15
|
+
header: "Title Explains",
|
16
|
+
image: "default",
|
17
|
+
primary_button: "Next Action",
|
18
|
+
primary_button_url: "#primary_button_url",
|
19
|
+
link_button: "Alt Action",
|
20
|
+
link_button_url: "#link_button_url",
|
21
|
+
size: "lg",
|
22
|
+
}) %>
|
23
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("file_upload", props: {id: "error", error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please upload a valid file")}) %>
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import FileUpload from '../_file_upload'
|
3
|
+
import List from '../../pb_list/_list'
|
4
|
+
import ListItem from '../../pb_list/_list_item'
|
5
|
+
import Icon from '../../pb_icon/_icon'
|
6
|
+
|
7
|
+
const AcceptedFilesList = ({ files }) => (
|
8
|
+
<List>
|
9
|
+
{files.map((file) => (
|
10
|
+
<ListItem key={file.name}>{file.name}</ListItem>
|
11
|
+
))}
|
12
|
+
</List>
|
13
|
+
)
|
14
|
+
|
15
|
+
const FileUploadError = (props) => {
|
16
|
+
const [filesToUpload, setFilesToUpload] = useState([])
|
17
|
+
|
18
|
+
const handleOnFilesAccepted = (files) => {
|
19
|
+
setFilesToUpload([...filesToUpload, ...files])
|
20
|
+
}
|
21
|
+
|
22
|
+
const error = (<>
|
23
|
+
<Icon icon="warning" /> Please upload a valid file
|
24
|
+
</>)
|
25
|
+
|
26
|
+
return (
|
27
|
+
<div>
|
28
|
+
<AcceptedFilesList
|
29
|
+
files={filesToUpload}
|
30
|
+
{...props}
|
31
|
+
/>
|
32
|
+
<FileUpload
|
33
|
+
error={error}
|
34
|
+
onFilesAccepted={handleOnFilesAccepted}
|
35
|
+
{...props}
|
36
|
+
/>
|
37
|
+
</div>
|
38
|
+
)
|
39
|
+
}
|
40
|
+
|
41
|
+
export default FileUploadError
|
@@ -3,6 +3,7 @@ examples:
|
|
3
3
|
rails:
|
4
4
|
- file_upload_default: File Upload
|
5
5
|
- file_upload_custom: Custom
|
6
|
+
- file_upload_error: Error
|
6
7
|
|
7
8
|
react:
|
8
9
|
- file_upload_default: Default List of files to upload
|
@@ -10,3 +11,4 @@ examples:
|
|
10
11
|
- file_upload_custom_message: Add a custom message
|
11
12
|
- file_upload_custom_description: Add your one accepted files description
|
12
13
|
- file_upload_max_size: Set a file size limit
|
14
|
+
- file_upload_error: Error
|
@@ -3,3 +3,4 @@ export { default as FileUploadAccept } from './_file_upload_accept.jsx'
|
|
3
3
|
export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
|
4
4
|
export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
|
5
5
|
export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
|
6
|
+
export { default as FileUploadError } from './_file_upload_error.jsx'
|
@@ -99,6 +99,7 @@
|
|
99
99
|
<%= form.url_field :example_url_field, props: { label: true } %>
|
100
100
|
<%= form.text_area :example_text_area, props: { label: true } %>
|
101
101
|
<%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
|
102
|
+
<%= form.dropdown_field :example_dropdown_multi, props: { label: true, options: example_dropdown_options, multi_select: true } %>
|
102
103
|
<%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
|
103
104
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
104
105
|
<%= form.check_box :example_checkbox,
|
@@ -98,6 +98,7 @@
|
|
98
98
|
<%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
|
99
99
|
<%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
|
100
100
|
<%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
|
101
|
+
<%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
|
101
102
|
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
|
102
103
|
<%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
103
104
|
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
@@ -0,0 +1,9 @@
|
|
1
|
+
<%= pb_rails("message", props: {
|
2
|
+
label: "Mike Bishop",
|
3
|
+
message: "So long, and thanks for all the fish!",
|
4
|
+
timestamp: "3 months ago",
|
5
|
+
avatar_name: "Mike Bishop",
|
6
|
+
avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
|
7
|
+
avatar_status: "offline",
|
8
|
+
avatar_grayscale: true,
|
9
|
+
}) %>
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import React from "react"
|
2
|
+
|
3
|
+
import Message from "../_message"
|
4
|
+
|
5
|
+
const MessageGrayscale = (props) => {
|
6
|
+
return (
|
7
|
+
<Message
|
8
|
+
avatarGrayscale
|
9
|
+
avatarName='Mike Bishop'
|
10
|
+
avatarStatus='offline'
|
11
|
+
avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
|
12
|
+
borderRadius='rounded'
|
13
|
+
label='Mike Bishop'
|
14
|
+
message='So long, and thanks for all the fish!'
|
15
|
+
timestamp='3 months ago'
|
16
|
+
{...props}
|
17
|
+
/>
|
18
|
+
)
|
19
|
+
}
|
20
|
+
|
21
|
+
export default MessageGrayscale
|
@@ -5,12 +5,14 @@ examples:
|
|
5
5
|
- message_timestamp: With Timestamp Hover
|
6
6
|
- message_hover: Hover
|
7
7
|
- message_mentions: Mentions
|
8
|
+
- message_grayscale: Grayscale Avatar
|
8
9
|
|
9
10
|
react:
|
10
11
|
- message_default: Default
|
11
12
|
- message_timestamp: With Timestamp Hover
|
12
13
|
- message_hover: Hover
|
13
14
|
- message_mentions: Mentions
|
15
|
+
- message_grayscale: Grayscale Avatar
|
14
16
|
|
15
17
|
swift:
|
16
18
|
- message_default_swift: Default
|
@@ -2,3 +2,4 @@ export { default as MessageDefault } from './_message_default.jsx'
|
|
2
2
|
export { default as MessageTimestamp } from './_message_timestamp.jsx'
|
3
3
|
export { default as MessageHover } from './_message_hover.jsx'
|
4
4
|
export { default as MessageMentions } from './_message_mentions.jsx'
|
5
|
+
export { default as MessageGrayscale } from './_message_grayscale.jsx'
|
@@ -1,62 +1,62 @@
|
|
1
1
|
<% treeData = [{
|
2
2
|
label: "Power Home Remodeling",
|
3
|
-
value: "
|
3
|
+
value: "powerHomeRemodeling",
|
4
4
|
id: "100",
|
5
5
|
expanded: true,
|
6
6
|
children: [
|
7
7
|
{
|
8
8
|
label: "People",
|
9
|
-
value: "
|
9
|
+
value: "people",
|
10
10
|
id: "101",
|
11
11
|
expanded: true,
|
12
12
|
children: [
|
13
13
|
{
|
14
14
|
label: "Talent Acquisition",
|
15
|
-
value: "
|
15
|
+
value: "talentAcquisition",
|
16
16
|
id: "102",
|
17
17
|
},
|
18
18
|
{
|
19
19
|
label: "Business Affairs",
|
20
|
-
value: "
|
20
|
+
value: "businessAffairs",
|
21
21
|
id: "103",
|
22
22
|
children: [
|
23
23
|
{
|
24
24
|
label: "Initiatives",
|
25
|
-
value: "
|
25
|
+
value: "initiatives",
|
26
26
|
id: "104",
|
27
27
|
},
|
28
28
|
{
|
29
29
|
label: "Learning & Development",
|
30
|
-
value: "
|
30
|
+
value: "learningAndDevelopment",
|
31
31
|
id: "105",
|
32
32
|
},
|
33
33
|
],
|
34
34
|
},
|
35
35
|
{
|
36
36
|
label: "People Experience",
|
37
|
-
value: "
|
37
|
+
value: "peopleExperience",
|
38
38
|
id: "106",
|
39
39
|
},
|
40
40
|
],
|
41
41
|
},
|
42
42
|
{
|
43
43
|
label: "Contact Center",
|
44
|
-
value: "
|
44
|
+
value: "contactCenter",
|
45
45
|
id: "107",
|
46
46
|
children: [
|
47
47
|
{
|
48
48
|
label: "Appointment Management",
|
49
|
-
value: "
|
49
|
+
value: "appointmentManagement",
|
50
50
|
id: "108",
|
51
51
|
},
|
52
52
|
{
|
53
53
|
label: "Customer Service",
|
54
|
-
value: "
|
54
|
+
value: "customerService",
|
55
55
|
id: "109",
|
56
56
|
},
|
57
57
|
{
|
58
58
|
label: "Energy",
|
59
|
-
value: "
|
59
|
+
value: "energy",
|
60
60
|
id: "110",
|
61
61
|
},
|
62
62
|
],
|
@@ -4,63 +4,63 @@ import MultiLevelSelect from "../_multi_level_select";
|
|
4
4
|
const treeData = [
|
5
5
|
{
|
6
6
|
label: "Power Home Remodeling",
|
7
|
-
value: "
|
7
|
+
value: "powerHomeRemodeling",
|
8
8
|
id: "powerhome1",
|
9
9
|
expanded: true,
|
10
10
|
children: [
|
11
11
|
{
|
12
12
|
label: "People",
|
13
|
-
value: "
|
13
|
+
value: "people",
|
14
14
|
id: "people1",
|
15
15
|
expanded: true,
|
16
16
|
children: [
|
17
17
|
{
|
18
18
|
label: "Talent Acquisition",
|
19
|
-
value: "
|
19
|
+
value: "talentAcquisition",
|
20
20
|
id: "talent1",
|
21
21
|
},
|
22
22
|
{
|
23
23
|
label: "Business Affairs",
|
24
|
-
value: "
|
24
|
+
value: "businessAffairs",
|
25
25
|
id: "business1",
|
26
26
|
children: [
|
27
27
|
{
|
28
28
|
label: "Initiatives",
|
29
|
-
value: "
|
29
|
+
value: "initiatives",
|
30
30
|
id: "initiative1",
|
31
31
|
},
|
32
32
|
{
|
33
33
|
label: "Learning & Development",
|
34
|
-
value: "
|
34
|
+
value: "learningAndDevelopment",
|
35
35
|
id: "development1",
|
36
36
|
},
|
37
37
|
],
|
38
38
|
},
|
39
39
|
{
|
40
40
|
label: "People Experience",
|
41
|
-
value: "
|
41
|
+
value: "peopleExperience",
|
42
42
|
id: "experience1",
|
43
43
|
},
|
44
44
|
],
|
45
45
|
},
|
46
46
|
{
|
47
47
|
label: "Contact Center",
|
48
|
-
value: "
|
48
|
+
value: "contactCenter",
|
49
49
|
id: "contact1",
|
50
50
|
children: [
|
51
51
|
{
|
52
52
|
label: "Appointment Management",
|
53
|
-
value: "
|
53
|
+
value: "appointmentManagement",
|
54
54
|
id: "appointment1",
|
55
55
|
},
|
56
56
|
{
|
57
57
|
label: "Customer Service",
|
58
|
-
value: "
|
58
|
+
value: "customerService",
|
59
59
|
id: "customer1",
|
60
60
|
},
|
61
61
|
{
|
62
62
|
label: "Energy",
|
63
|
-
value: "
|
63
|
+
value: "energy",
|
64
64
|
id: "energy1",
|
65
65
|
},
|
66
66
|
],
|
@@ -1,62 +1,62 @@
|
|
1
1
|
<% treeData = [{
|
2
2
|
label: "Power Home Remodeling",
|
3
|
-
value: "
|
3
|
+
value: "powerHomeRemodeling",
|
4
4
|
id: "100",
|
5
5
|
expanded: true,
|
6
6
|
children: [
|
7
7
|
{
|
8
8
|
label: "People",
|
9
|
-
value: "
|
9
|
+
value: "people",
|
10
10
|
id: "101",
|
11
11
|
expanded: true,
|
12
12
|
children: [
|
13
13
|
{
|
14
14
|
label: "Talent Acquisition",
|
15
|
-
value: "
|
15
|
+
value: "talentAcquisition",
|
16
16
|
id: "102",
|
17
17
|
},
|
18
18
|
{
|
19
19
|
label: "Business Affairs",
|
20
|
-
value: "
|
20
|
+
value: "business Affairs",
|
21
21
|
id: "103",
|
22
22
|
children: [
|
23
23
|
{
|
24
24
|
label: "Initiatives",
|
25
|
-
value: "
|
25
|
+
value: "initiatives",
|
26
26
|
id: "104",
|
27
27
|
},
|
28
28
|
{
|
29
29
|
label: "Learning & Development",
|
30
|
-
value: "
|
30
|
+
value: "learningAndDevelopment",
|
31
31
|
id: "105",
|
32
32
|
},
|
33
33
|
],
|
34
34
|
},
|
35
35
|
{
|
36
36
|
label: "People Experience",
|
37
|
-
value: "
|
37
|
+
value: "peopleExperience",
|
38
38
|
id: "106",
|
39
39
|
},
|
40
40
|
],
|
41
41
|
},
|
42
42
|
{
|
43
43
|
label: "Contact Center",
|
44
|
-
value: "
|
44
|
+
value: "contactCenter",
|
45
45
|
id: "107",
|
46
46
|
children: [
|
47
47
|
{
|
48
48
|
label: "Appointment Management",
|
49
|
-
value: "
|
49
|
+
value: "appointmentManagement",
|
50
50
|
id: "108",
|
51
51
|
},
|
52
52
|
{
|
53
53
|
label: "Customer Service",
|
54
|
-
value: "
|
54
|
+
value: "customerService",
|
55
55
|
id: "109",
|
56
56
|
},
|
57
57
|
{
|
58
58
|
label: "Energy",
|
59
|
-
value: "
|
59
|
+
value: "energy",
|
60
60
|
id: "110",
|
61
61
|
},
|
62
62
|
],
|