playbook_ui_docs 14.18.0 → 14.19.0.pre.alpha.PLAY20937693
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 +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -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 +6 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -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_circle_chart/docs/_circle_chart_block.html.erb +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +64 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
- 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 +4 -1
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
- 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_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 +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -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_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +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_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -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_error_state.jsx +6 -2
- 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 +56 -16
- 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_colors.md → _draggable_drop_zones_colors_react.md} +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_drop_zones.md → _draggable_drop_zones_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,61 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import Dropdown from '../../pb_dropdown/_dropdown'
|
3
|
+
import IconCircle from '../../pb_icon_circle/_icon_circle';
|
4
|
+
|
5
|
+
const DropdownWithSearch = (props) => {
|
6
|
+
const [selectedOption, setSelectedOption] = useState();
|
7
|
+
|
8
|
+
const options = [
|
9
|
+
{
|
10
|
+
label: "United States",
|
11
|
+
value: "United States",
|
12
|
+
icon: "🇺🇸",
|
13
|
+
id: "United-states"
|
14
|
+
|
15
|
+
},
|
16
|
+
{
|
17
|
+
label: "United Kingdom",
|
18
|
+
value: "United Kingdom",
|
19
|
+
icon: "🇬🇧",
|
20
|
+
id: "united-kingdom"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
label: "Pakistan",
|
24
|
+
value: "Pakistan",
|
25
|
+
icon: "🇵🇰",
|
26
|
+
id: "pakistan"
|
27
|
+
}
|
28
|
+
];
|
29
|
+
|
30
|
+
|
31
|
+
return (
|
32
|
+
<div>
|
33
|
+
<Dropdown
|
34
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
35
|
+
options={options}
|
36
|
+
{...props}
|
37
|
+
>
|
38
|
+
<Dropdown.Trigger>
|
39
|
+
<div key={selectedOption ? selectedOption.icon : "flag"}>
|
40
|
+
<IconCircle
|
41
|
+
cursor="pointer"
|
42
|
+
icon={selectedOption ? selectedOption.icon : "flag"}
|
43
|
+
variant="royal"
|
44
|
+
/>
|
45
|
+
</div>
|
46
|
+
</Dropdown.Trigger>
|
47
|
+
<Dropdown.Container maxWidth="xs"
|
48
|
+
searchbar
|
49
|
+
>
|
50
|
+
{options.map((option) => (
|
51
|
+
<Dropdown.Option key={option.id}
|
52
|
+
option={option}
|
53
|
+
/>
|
54
|
+
))}
|
55
|
+
</Dropdown.Container>
|
56
|
+
</Dropdown>
|
57
|
+
</div>
|
58
|
+
)
|
59
|
+
}
|
60
|
+
|
61
|
+
export default DropdownWithSearch
|
@@ -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,12 +1,15 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
3
|
- dropdown_default: Default
|
4
|
+
- dropdown_with_autocomplete: Autocomplete
|
4
5
|
- dropdown_subtle_variant: Subtle Variant
|
5
6
|
- dropdown_subcomponent_structure_rails: Subcomponent Structure
|
7
|
+
- dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
|
6
8
|
- dropdown_with_label: With Label
|
7
9
|
- dropdown_with_custom_options_rails: Custom Options
|
8
10
|
- dropdown_with_custom_display_rails: Custom Display
|
9
11
|
- dropdown_with_custom_trigger_rails: Custom Trigger
|
12
|
+
- dropdown_with_search_rails: Custom Trigger Dropdown with Search
|
10
13
|
- dropdown_with_custom_padding: Custom Option Padding
|
11
14
|
- dropdown_error: Dropdown with Error
|
12
15
|
- dropdown_default_value: Default Value
|
@@ -15,20 +18,20 @@ examples:
|
|
15
18
|
|
16
19
|
react:
|
17
20
|
- dropdown_default: Default
|
21
|
+
- dropdown_with_autocomplete: Autocomplete
|
18
22
|
- dropdown_subtle_variant: Subtle Variant
|
19
23
|
- dropdown_subcomponent_structure: Subcomponent Structure
|
24
|
+
- dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
|
20
25
|
- dropdown_with_label: With Label
|
21
26
|
- dropdown_with_custom_options: Custom Options
|
22
27
|
- dropdown_with_custom_display: Custom Display
|
23
28
|
- dropdown_with_custom_trigger: Custom Trigger
|
29
|
+
- dropdown_with_search: Custom Trigger Dropdown with Search
|
24
30
|
- dropdown_with_custom_padding: Custom Option Padding
|
25
31
|
- dropdown_error: Dropdown with Error
|
26
32
|
- dropdown_default_value: Default Value
|
27
33
|
- dropdown_blank_selection: Blank Selection
|
28
34
|
- dropdown_clear_selection: Clear Selection
|
29
35
|
- dropdown_separators_hidden: Separators Hidden
|
30
|
-
|
31
|
-
# - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
32
|
-
# - dropdown_with_external_control: useDropdown Hook
|
33
|
-
# - dropdown_with_hook: useDropdown Hook with Any Trigger
|
36
|
+
- dropdown_with_external_control: useDropdown Hook
|
34
37
|
|
@@ -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,4 @@ 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'
|
@@ -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,41 @@
|
|
1
|
+
<%=
|
2
|
+
pb_rails("filter", props: {
|
3
|
+
id: "filter_within_trubo_frames",
|
4
|
+
position: "top",
|
5
|
+
filters: [
|
6
|
+
{ name: "name", value: "John Wick" },
|
7
|
+
{ name: "city", value: "San Francisco"}
|
8
|
+
],
|
9
|
+
sort_menu: [
|
10
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
11
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
12
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
13
|
+
],
|
14
|
+
template: "default",
|
15
|
+
results: 1,
|
16
|
+
popover_props: { append_to: "parent" },
|
17
|
+
}) do
|
18
|
+
%>
|
19
|
+
<%
|
20
|
+
example_collection = [
|
21
|
+
OpenStruct.new(name: "USA", value: 1),
|
22
|
+
OpenStruct.new(name: "Canada", value: 2),
|
23
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
24
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
25
|
+
OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
|
26
|
+
]
|
27
|
+
%>
|
28
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
29
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
30
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
|
31
|
+
|
32
|
+
<%= form.actions do |action| %>
|
33
|
+
<%= action.submit props: {
|
34
|
+
text: "Apply",
|
35
|
+
data: {
|
36
|
+
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
37
|
+
},}%>
|
38
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.
|
@@ -0,0 +1,52 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import lineGraphTheme from '../lineGraphTheme'
|
3
|
+
import Highcharts from "highcharts"
|
4
|
+
import HighchartsReact from "highcharts-react-official"
|
5
|
+
|
6
|
+
const data = [{
|
7
|
+
name: 'Installation',
|
8
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
|
9
|
+
}, {
|
10
|
+
name: 'Manufacturing',
|
11
|
+
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
|
12
|
+
}, {
|
13
|
+
name: 'Sales & Distribution',
|
14
|
+
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
|
15
|
+
}, {
|
16
|
+
name: 'Project Development',
|
17
|
+
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
|
18
|
+
}, {
|
19
|
+
name: 'Other',
|
20
|
+
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
|
21
|
+
}]
|
22
|
+
|
23
|
+
const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
24
|
+
|
25
|
+
const baseOptions = {
|
26
|
+
series: data,
|
27
|
+
title: { text: "Solar Employment Growth by Sector, 2010-2016" },
|
28
|
+
subtitle: { text: "Source: thesolarfoundation.com" },
|
29
|
+
xAxis: {
|
30
|
+
categories: categories,
|
31
|
+
},
|
32
|
+
yAxis: {
|
33
|
+
title: {
|
34
|
+
text: "Number of Employees",
|
35
|
+
},
|
36
|
+
},
|
37
|
+
}
|
38
|
+
|
39
|
+
const LineGraphPbStyles = () => {
|
40
|
+
const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
|
41
|
+
|
42
|
+
return(
|
43
|
+
<div>
|
44
|
+
<HighchartsReact
|
45
|
+
highcharts={Highcharts}
|
46
|
+
options={options}
|
47
|
+
/>
|
48
|
+
</div>
|
49
|
+
)
|
50
|
+
}
|
51
|
+
|
52
|
+
export default LineGraphPbStyles
|
@@ -0,0 +1 @@
|
|
1
|
+
You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.
|
@@ -4,3 +4,4 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
|
|
4
4
|
export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
|
5
5
|
export { default as LineGraphHeight } from './_line_graph_height.jsx'
|
6
6
|
export { default as LineGraphColors } from './_line_graph_colors.jsx'
|
7
|
+
export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'
|
@@ -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'
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import PhoneNumberInput from '../_phone_number_input'
|
3
|
+
|
4
|
+
const PhoneNumberInputCountrySearch = (props) => (
|
5
|
+
<>
|
6
|
+
<PhoneNumberInput
|
7
|
+
countrySearch
|
8
|
+
id='country-search'
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
<PhoneNumberInput
|
12
|
+
countrySearch
|
13
|
+
id='country-search-limited'
|
14
|
+
onlyCountries={["br", "us", "ph", "gb"]}
|
15
|
+
{...props}
|
16
|
+
/>
|
17
|
+
</>
|
18
|
+
)
|
19
|
+
|
20
|
+
export default PhoneNumberInputCountrySearch
|
@@ -0,0 +1 @@
|
|
1
|
+
Set `country_search` / `countrySearch` to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.
|
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
|
|
3
3
|
import Button from '../../pb_button/_button'
|
4
4
|
import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
|
5
5
|
import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
|
6
|
+
import Icon from '../../pb_icon/_icon'
|
6
7
|
|
7
8
|
const PhoneNumberInputValidation = (props) => {
|
8
9
|
const [formErrors, setFormErrors] = useState("");
|
@@ -29,6 +30,12 @@ const PhoneNumberInputValidation = (props) => {
|
|
29
30
|
setShowFormErrors(formErrors.length > 0);
|
30
31
|
}, [formErrors]);
|
31
32
|
|
33
|
+
const error = (
|
34
|
+
<>
|
35
|
+
<Icon icon="warning" /> Missing phone number.
|
36
|
+
</>
|
37
|
+
)
|
38
|
+
|
32
39
|
return (
|
33
40
|
<form
|
34
41
|
action=""
|
@@ -43,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
|
|
43
50
|
/>
|
44
51
|
)}
|
45
52
|
<PhoneNumberInput
|
46
|
-
error=
|
53
|
+
error={error}
|
47
54
|
id="validation"
|
48
55
|
initialCountry={countryCode}
|
49
56
|
onChange={handleOnChange}
|
@@ -9,6 +9,7 @@ examples:
|
|
9
9
|
- phone_number_input_clear_field: Clearing the Input Field
|
10
10
|
- phone_number_input_access_input_element: Accessing the Input Element
|
11
11
|
- phone_number_input_format: Format as You Type
|
12
|
+
- phone_number_input_country_search: Country Search
|
12
13
|
|
13
14
|
rails:
|
14
15
|
- phone_number_input_default: Default
|
@@ -18,4 +19,5 @@ examples:
|
|
18
19
|
- phone_number_input_validation: Form Validation
|
19
20
|
- phone_number_input_format: Format as You Type
|
20
21
|
- phone_number_input_hidden_inputs: Hidden Inputs
|
22
|
+
- phone_number_input_country_search: Country Search
|
21
23
|
|
@@ -6,3 +6,4 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
|
|
6
6
|
export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
|
7
7
|
export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
|
8
8
|
export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
|
9
|
+
export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
|
@@ -0,0 +1,46 @@
|
|
1
|
+
<%= pb_rails("flex", props: {
|
2
|
+
dark: true,
|
3
|
+
orientation: "row",
|
4
|
+
vertical: "center",
|
5
|
+
margin_bottom: "md"
|
6
|
+
}) do %>
|
7
|
+
<%= pb_rails("body", props: { text: "Click info for more details" }) %>
|
8
|
+
|
9
|
+
<%= pb_rails("circle_icon_button", props: {
|
10
|
+
variant: "secondary",
|
11
|
+
icon: "info",
|
12
|
+
id: "append-to-popover-1"
|
13
|
+
}) %>
|
14
|
+
<%= pb_rails("popover", props: {
|
15
|
+
trigger_element_id: "append-to-popover-1",
|
16
|
+
tooltip_id: "append-to-tooltip-1",
|
17
|
+
offset: true,
|
18
|
+
position: "top",
|
19
|
+
append_to: "parent",
|
20
|
+
}) do %>
|
21
|
+
I'm a popover. I have been appended to my parent element.
|
22
|
+
<% end %>
|
23
|
+
<% end %>
|
24
|
+
|
25
|
+
<%= pb_rails("flex", props: {
|
26
|
+
dark: true,
|
27
|
+
orientation: "row",
|
28
|
+
vertical: "center"
|
29
|
+
}) do %>
|
30
|
+
<%= pb_rails("body", props: { text: "Click info for more details" }) %>
|
31
|
+
|
32
|
+
<%= pb_rails("circle_icon_button", props: {
|
33
|
+
variant: "secondary",
|
34
|
+
icon: "info",
|
35
|
+
id: "append-to-popover-2"
|
36
|
+
}) %>
|
37
|
+
<%= pb_rails("popover", props: {
|
38
|
+
trigger_element_id: "append-to-popover-2",
|
39
|
+
tooltip_id: "append-to-tooltip-2",
|
40
|
+
offset: true,
|
41
|
+
position: "top",
|
42
|
+
append_to: ".kit-show-wrapper",
|
43
|
+
}) do %>
|
44
|
+
I'm a popover. I have been appended to the .kit-show-wrapper.
|
45
|
+
<% end %>
|
46
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `append_to` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.
|