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.
Files changed (121) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +0 -6
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
  8. 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
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -5
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -2
  12. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
  13. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
  14. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
  15. data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
  16. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  17. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  18. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  24. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  25. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  26. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  27. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  28. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  29. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  30. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  31. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  32. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  40. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  41. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  42. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  43. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +64 -0
  45. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  46. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  47. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
  48. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
  49. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
  50. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
  51. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
  52. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -1
  53. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  54. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
  55. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  56. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
  57. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
  59. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
  60. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
  61. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
  62. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
  64. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
  65. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
  66. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -4
  67. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -2
  68. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
  69. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
  70. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
  71. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
  72. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
  73. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
  74. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
  75. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  76. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -1
  77. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
  78. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
  79. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
  80. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  81. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
  82. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
  83. data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
  84. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
  85. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
  86. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  87. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  88. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  89. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  90. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  91. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  92. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
  93. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
  94. data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
  95. data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
  96. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  97. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
  98. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
  99. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  100. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
  101. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  102. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
  103. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  104. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
  105. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
  106. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  107. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  108. data/dist/playbook-doc.js +2 -2
  109. metadata +56 -16
  110. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
  111. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
  112. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
  113. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
  114. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
  115. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
  116. /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
  117. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
  118. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors.md → _draggable_drop_zones_colors_react.md} +0 -0
  119. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
  120. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones.md → _draggable_drop_zones_react.md} +0 -0
  121. /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,2 @@
1
+ The optional `searchbar` boolean prop can also be used on the `Dropdown.Container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
2
+ `searchbar` is set to false by default.
@@ -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 %>
@@ -0,0 +1,2 @@
1
+ The optional `searchbar` boolean prop can also be used on the `dropdown/dropdown_container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
2
+ `searchbar` is set to false by default.
@@ -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
- # - dropdown_with_autocomplete: Autocomplete
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 DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
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,7 @@
1
+ <%= pb_rails("flex", props: {align: "center", justify: "center"}) 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
+ }) %>
7
+ <% 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 %>
@@ -1,5 +1,9 @@
1
1
  examples:
2
-
2
+ rails:
3
+ - empty_state_default: Default
4
+ - empty_state_size: Size
5
+ - empty_state_orientation: Orientation
6
+ - empty_state_alignment: Alignment
3
7
 
4
8
  react:
5
9
  - empty_state_default: Default
@@ -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.
@@ -11,6 +11,7 @@ examples:
11
11
  - filter_max_height: Max Height for Popover Inside of Filter
12
12
  - filter_placement: Filter Placement
13
13
  - filter_popover_props: Popover Props
14
+ - filter_within_turbo_frames: Within Turbo Frames
14
15
 
15
16
  react:
16
17
  - filter_default: Default
@@ -11,7 +11,6 @@ SolidGauge(Highcharts);
11
11
  const data = [{ name: "Name", y: 45 }]
12
12
 
13
13
  const baseOptions = {
14
- title: { text: "" },
15
14
  series: [{ data: data }],
16
15
  };
17
16
 
@@ -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.
@@ -11,6 +11,7 @@ examples:
11
11
 
12
12
  react:
13
13
  - line_graph_default: Default
14
+ - line_graph_pb_styles: Playbook Styles
14
15
  - line_graph_legend: Legend
15
16
  - line_graph_legend_position: Legend Position
16
17
  - line_graph_legend_nonclickable: Legend Nonclickable
@@ -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'
@@ -9,7 +9,7 @@ const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
9
9
  <Flex
10
10
  columnGap="lg"
11
11
  orientation="row"
12
- ref={ref}
12
+ ref={ref}
13
13
  >
14
14
  {Array.from({ length: 15 }, (_, index) => (
15
15
  <FlexItem key={index}>
@@ -0,0 +1,10 @@
1
+ <%= pb_rails("phone_number_input", props: {
2
+ country_search: true,
3
+ id: "country-search",
4
+ }) %>
5
+
6
+ <%= pb_rails("phone_number_input", props: {
7
+ country_search: true,
8
+ id: "country-search-limited",
9
+ only_countries: ["br", "us", "ph", "gb"],
10
+ }) %>
@@ -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="Missing phone number."
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
+ &nbsp;
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
+ &nbsp;
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.
@@ -6,6 +6,7 @@ examples:
6
6
  - popover_z_index: Set Z-Index
7
7
  - popover_scroll_height: Scroll and Height Settings
8
8
  - popover_actionable_content: With Actionable Content
9
+ - popover_append_to: Append To
9
10
 
10
11
  react:
11
12
  - popover_default: Default
@@ -1,5 +1,5 @@
1
1
  <%= pb_rails("select", props: {
2
- error: "Please make a valid selection",
2
+ error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
3
3
  label: "Favorite Food",
4
4
  name: "food",
5
5
  options: [