playbook_ui_docs 14.13.0.pre.rc.10 → 14.14.0.pre.alpha.PBNTR866finalizecssendlessscroll6486

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 (113) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx +75 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx +50 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +3 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +3 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +33 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +55 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +3 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +3 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json +152002 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -1
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +69 -0
  20. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md +1 -0
  21. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -1
  22. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +22 -0
  24. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +34 -0
  25. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md +1 -0
  26. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md +1 -0
  27. data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
  28. data/app/pb_kits/playbook/pb_currency/docs/index.js +2 -1
  29. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb +99 -0
  30. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +1 -0
  31. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +61 -0
  32. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -0
  33. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +90 -0
  34. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +5 -0
  35. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -5
  36. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  37. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb +8 -0
  38. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb +33 -0
  39. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +0 -0
  40. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +20 -1
  41. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb +24 -0
  42. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb +21 -0
  43. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md +1 -0
  44. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb +49 -0
  45. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +5 -0
  46. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  47. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +2 -1
  48. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +11 -0
  49. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +22 -0
  50. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +1 -0
  51. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +1 -0
  52. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +2 -0
  53. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  54. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +1 -2
  55. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +17 -0
  56. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +27 -0
  57. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +61 -0
  58. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +5 -3
  59. data/app/pb_kits/playbook/pb_icon_button/docs/index.js +2 -0
  60. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb +11 -0
  61. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx +37 -0
  62. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md +1 -0
  63. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md +1 -0
  64. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb +11 -0
  65. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +37 -0
  66. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md +1 -0
  67. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md +1 -0
  68. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -0
  69. data/app/pb_kits/playbook/pb_overlay/docs/index.js +2 -0
  70. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb +1 -0
  71. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx +7 -0
  72. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md +1 -0
  73. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb +1 -0
  74. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx +18 -0
  75. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md +1 -0
  76. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md +1 -0
  77. data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml +2 -0
  78. data/app/pb_kits/playbook/pb_progress_pills/docs/index.js +1 -0
  79. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +47 -0
  80. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +88 -0
  81. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +1 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +1 -1
  83. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb +51 -0
  84. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md +2 -0
  85. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +96 -0
  86. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
  87. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
  88. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  89. data/app/pb_kits/playbook/pb_table/docs/index.js +3 -1
  90. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +15 -1
  91. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +39 -0
  92. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +3 -0
  93. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
  94. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
  95. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb +45 -0
  96. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md +5 -0
  97. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb +33 -0
  98. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md +3 -0
  99. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  100. data/dist/playbook-doc.js +1 -1
  101. metadata +67 -14
  102. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +0 -19
  103. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +0 -26
  104. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +0 -10
  105. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +0 -17
  106. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +0 -19
  107. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +0 -16
  108. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +0 -35
  109. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +0 -42
  110. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +0 -13
  111. data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +0 -15
  112. data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
  113. /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_with_custom_click.md → _table_with_collapsible_with_custom_click_react.md} +0 -0
@@ -0,0 +1,88 @@
1
+ import React from 'react'
2
+ import { Table, Icon } from 'playbook-ui'
3
+
4
+ const TableWithClickableRows = (props) => {
5
+
6
+
7
+ return (
8
+ <Table
9
+ size="sm"
10
+ {...props}
11
+ >
12
+ <Table.Head>
13
+ <Table.Row>
14
+ <Table.Header>{"Column 1"}</Table.Header>
15
+ <Table.Header>{"Column 2"}</Table.Header>
16
+ <Table.Header>{"Column 3"}</Table.Header>
17
+ <Table.Header>{"Column 4"}</Table.Header>
18
+ <Table.Header>{"Column 5"}</Table.Header>
19
+ <Table.Header>{""}</Table.Header>
20
+ </Table.Row>
21
+ </Table.Head>
22
+ <Table.Body>
23
+ <Table.Row
24
+ cursor="pointer"
25
+ htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
26
+ {...props}
27
+ >
28
+ <Table.Cell>{"Value 1"}</Table.Cell>
29
+ <Table.Cell>{"Value 2"}</Table.Cell>
30
+ <Table.Cell>{"Value 3"}</Table.Cell>
31
+ <Table.Cell>{"Value 4"}</Table.Cell>
32
+ <Table.Cell>{"Value 5"}</Table.Cell>
33
+ <Table.Cell textAlign="right">
34
+ <Icon
35
+ color="primary_action"
36
+ fixedWidth
37
+ icon="chevron-right"
38
+ size="xs"
39
+ {...props}
40
+ />
41
+ </Table.Cell>
42
+ </Table.Row>
43
+ <Table.Row
44
+ cursor="pointer"
45
+ htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
46
+ {...props}
47
+ >
48
+ <Table.Cell>{"Value 1"}</Table.Cell>
49
+ <Table.Cell>{"Value 2"}</Table.Cell>
50
+ <Table.Cell>{"Value 3"}</Table.Cell>
51
+ <Table.Cell>{"Value 4"}</Table.Cell>
52
+ <Table.Cell>{"Value 5"}</Table.Cell>
53
+ <Table.Cell textAlign="right">
54
+ <Icon
55
+ color="primary_action"
56
+ fixedWidth
57
+ icon="chevron-right"
58
+ size="xs"
59
+ {...props}
60
+ />
61
+ </Table.Cell>
62
+ </Table.Row>
63
+ <Table.Row
64
+ cursor="pointer"
65
+ htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
66
+ {...props}
67
+ >
68
+ <Table.Cell>{"Value 1"}</Table.Cell>
69
+ <Table.Cell>{"Value 2"}</Table.Cell>
70
+ <Table.Cell>{"Value 3"}</Table.Cell>
71
+ <Table.Cell>{"Value 4"}</Table.Cell>
72
+ <Table.Cell>{"Value 5"}</Table.Cell>
73
+ <Table.Cell textAlign="right">
74
+ <Icon
75
+ color="primary_action"
76
+ fixedWidth
77
+ icon="chevron-right"
78
+ size="xs"
79
+ {...props}
80
+ />
81
+ </Table.Cell>
82
+ </Table.Row>
83
+ </Table.Body>
84
+ </Table>
85
+ )
86
+ }
87
+
88
+ export default TableWithClickableRows
@@ -0,0 +1 @@
1
+ Clickable table rows do not require any additional props. This doc example showcases how to set them up using `html_options`/`htmlOptions` and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.
@@ -16,7 +16,7 @@ const TableWithCollapsible = (props) => {
16
16
  );
17
17
  };
18
18
 
19
- return (
19
+ return (
20
20
  <Table
21
21
  size="sm"
22
22
  {...props}
@@ -0,0 +1,51 @@
1
+ <% content = capture do %>
2
+ <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
3
+ <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
4
+ <% end %>
5
+ <% end %>
6
+
7
+ <%= pb_rails("table", props: { size: "sm" }) do %>
8
+ <%= pb_rails("table/table_head") do %>
9
+ <%= pb_rails("table/table_row") do %>
10
+ <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
11
+ <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
12
+ <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
13
+ <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
14
+ <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
15
+ <%= pb_rails("table/table_header", props: { text: ""}) %>
16
+ <% end %>
17
+ <% end %>
18
+ <%= pb_rails("table/table_body") do %>
19
+ <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-1", id: "5" }) do %>
20
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
21
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
22
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
23
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
24
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
25
+ <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-1", cursor: "pointer" }) do %>
26
+ <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
27
+ <% end %>
28
+ <% end %>
29
+ <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-2", id: "6" }) do %>
30
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
31
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
32
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
33
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
34
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
35
+ <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-2", cursor: "pointer" }) do %>
36
+ <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
37
+ <% end %>
38
+ <% end %>
39
+ <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-3", id: "7" }) do %>
40
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
41
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
42
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
43
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
44
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
45
+ <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-3", cursor: "pointer" }) do %>
46
+ <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
47
+ <% end %>
48
+ <% end %>
49
+ <% end %>
50
+ <% end %>
51
+
@@ -0,0 +1,2 @@
1
+ When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggle_cell_id` prop to pass in the id of the Cell you want to use as the trigger.
2
+ __NOTE__: `toggle_cell_id` and the `id` on the Cell you want to use as the trigger MUST be the same. Please also be aware that you will need to pass in an `id` to any Table Rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
@@ -0,0 +1,96 @@
1
+ <% checkboxes = [
2
+ { name: 'Coffee', id: 'coffee', checked: false },
3
+ { name: 'Ice Cream', id: 'ice-cream', checked: false },
4
+ { name: 'Chocolate', id: 'chocolate', checked: true }
5
+ ] %>
6
+
7
+ <%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
8
+ <%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
9
+ <%= pb_rails("button", props: { text: "Delete", id: "delete-button" }) %>
10
+ <% end %>
11
+ <% end %>
12
+
13
+ <%= pb_rails("table", props: { size: "sm" }) do %>
14
+ <%= pb_rails("table/table_head") do %>
15
+ <%= pb_rails("table/table_row") do %>
16
+ <%= pb_rails("table/table_header") do %>
17
+ <%= pb_rails("checkbox", props: {
18
+ checked: true,
19
+ value: "checkbox-value",
20
+ name: "main-checkbox-selectable",
21
+ indeterminate: true,
22
+ id: "checkbox-selectable"
23
+ }) %>
24
+ <% end %>
25
+ <%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
26
+ <%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
27
+ <%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
28
+ <%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
29
+ <%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
30
+ <% end %>
31
+ <% end %>
32
+ <%= pb_rails("table/table_body") do %>
33
+ <% checkboxes.each_with_index do |checkbox, index| %>
34
+ <%= pb_rails("table/table_row") do %>
35
+ <%= pb_rails("table/table_cell") do %>
36
+ <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
37
+ <% end %>
38
+ <%= pb_rails("table/table_cell") do %>
39
+ <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
40
+ <% end %>
41
+ <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
42
+ <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
43
+ <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
44
+ <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
45
+ <% end %>
46
+ <% end %>
47
+ <% end %>
48
+ <% end %>
49
+
50
+ <script>
51
+ document.addEventListener('DOMContentLoaded', function() {
52
+ const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
53
+ const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
54
+ const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
55
+ const deleteButton = document.getElementById('delete-button');
56
+
57
+ const updateDeleteButton = () => {
58
+ const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
59
+ deleteButton.style.display = anyChecked ? 'block' : 'none';
60
+ };
61
+
62
+ const updateMainCheckbox = () => {
63
+ // Count the number of checked child checkboxes
64
+ const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
65
+ // Determine if the main checkbox should be in an indeterminate state
66
+ const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
67
+
68
+ // Set the main checkbox states
69
+ mainCheckbox.indeterminate = indeterminate;
70
+ mainCheckbox.checked = checkedCount > 0;
71
+
72
+ // Determine the icon class to add and remove based on the number of checked checkboxes
73
+ const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
74
+ const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
75
+
76
+ // Add and remove the icon class to the main checkbox wrapper
77
+ mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
78
+ mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
79
+
80
+ // Toggle the visibility of the checkbox icon based on the indeterminate state
81
+ mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
82
+ mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
83
+
84
+ updateDeleteButton();
85
+ };
86
+
87
+ mainCheckbox.addEventListener('change', function() {
88
+ childCheckboxes.forEach(cb => cb.checked = this.checked);
89
+ updateMainCheckbox();
90
+ });
91
+
92
+ childCheckboxes.forEach(cb => {
93
+ cb.addEventListener('change', updateMainCheckbox);
94
+ });
95
+ });
96
+ </script>
@@ -0,0 +1,101 @@
1
+ import React, { useState } from 'react'
2
+ import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
3
+
4
+ const TableWithSelectableRows = (props) => {
5
+ const [checkboxes, setCheckboxes] = useState([
6
+ { name: "Coffee", checked: false },
7
+ { name: "Ice Cream", checked: false },
8
+ { name: "Chocolate", checked: true },
9
+ ]);
10
+
11
+ const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked);
12
+ const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked);
13
+
14
+ const processCheckboxes = (checked) =>
15
+ checkboxes.slice(0).map((checkbox) => {
16
+ checkbox.checked = checked;
17
+ return checkbox;
18
+ });
19
+
20
+ const onToggleAll = () => {
21
+ setCheckboxes(
22
+ isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
23
+ );
24
+ };
25
+
26
+ const updateCheckboxes = (checkbox, index) => {
27
+ const newCheckboxes = checkboxes.slice(0);
28
+ newCheckboxes[index].checked = !checkbox.checked;
29
+ setCheckboxes(newCheckboxes);
30
+ };
31
+
32
+ return (
33
+ <>
34
+ <Flex
35
+ justify="end"
36
+ marginBottom="sm"
37
+ >
38
+ {!isNoneChecked && (
39
+ <Flex
40
+ justify="end"
41
+ marginBottom="sm"
42
+ >
43
+ <Button>Delete</Button>
44
+ </Flex>
45
+ )}
46
+ </Flex>
47
+ <Table
48
+ size="sm"
49
+ {...props}
50
+ >
51
+ <Table.Head>
52
+ <Table.Row>
53
+ <Table.Header>
54
+ <Checkbox
55
+ checked={isAllChecked}
56
+ indeterminate={!isAllChecked && !isNoneChecked}
57
+ name="checkbox-name"
58
+ onChange={onToggleAll}
59
+ value="check-box value"
60
+ />
61
+ </Table.Header>
62
+ <Table.Header>{"Column 1"}</Table.Header>
63
+ <Table.Header>{"Column 2"}</Table.Header>
64
+ <Table.Header>{"Column 3"}</Table.Header>
65
+ <Table.Header>{"Column 4"}</Table.Header>
66
+ <Table.Header>{"Column 5"}</Table.Header>
67
+ </Table.Row>
68
+ </Table.Head>
69
+ <Table.Body>
70
+ {checkboxes.map((checkbox, index) => (
71
+ <Table.Row key={index}>
72
+ <Table.Cell>
73
+ <Checkbox
74
+ checked={checkbox.checked}
75
+ name={checkbox.name}
76
+ onChange={() => {
77
+ updateCheckboxes(checkbox, index);
78
+ }}
79
+ value="check-box value"
80
+ />
81
+ </Table.Cell>
82
+ <Table.Cell>
83
+ <Image
84
+ alt="picture of a misty forest"
85
+ size="xs"
86
+ url="https://unsplash.it/500/400/?image=634"
87
+ />
88
+ </Table.Cell>
89
+ <Table.Cell>{"Value 2"}</Table.Cell>
90
+ <Table.Cell>{"Value 3"}</Table.Cell>
91
+ <Table.Cell>{"Value 4"}</Table.Cell>
92
+ <Table.Cell>{"Value 5"}</Table.Cell>
93
+ </Table.Row>
94
+ ))}
95
+ </Table.Body>
96
+ </Table>
97
+ </>
98
+ )
99
+ }
100
+
101
+ export default TableWithSelectableRows
@@ -0,0 +1 @@
1
+ Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.
@@ -31,9 +31,12 @@ examples:
31
31
  - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
32
32
  - table_outer_padding: Outer Padding
33
33
  - table_with_collapsible: Table with Collapsible
34
+ - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
34
35
  - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
35
36
  - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
36
37
  - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
38
+ - table_with_clickable_rows: Table with Clickable Rows
39
+ - table_with_selectable_rows: Table with Selectable Rows
37
40
 
38
41
  react:
39
42
  - table_sm: Small
@@ -70,3 +73,5 @@ examples:
70
73
  - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
71
74
  - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
72
75
  - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
76
+ - table_with_clickable_rows: Table with Clickable Rows
77
+ - table_with_selectable_rows: Table with Selectable Rows
@@ -32,4 +32,6 @@ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
32
32
  export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
33
33
  export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
34
34
  export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
35
- export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
35
+ export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
36
+ export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
37
+ export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
@@ -27,6 +27,20 @@
27
27
  placeholder: "123-45-6789"
28
28
  }) %>
29
29
 
30
+ <%= pb_rails("text_input", props: {
31
+ label: "Credit Card",
32
+ mask: "credit_card",
33
+ margin_bottom: "md",
34
+ placeholder: "1234 5678 9012 3456"
35
+ }) %>
36
+
37
+ <%= pb_rails("text_input", props: {
38
+ label: "CVV",
39
+ mask: "cvv",
40
+ margin_bottom: "md",
41
+ placeholder: "123"
42
+ }) %>
43
+
30
44
  <%= pb_rails("title" , props: {
31
45
  text: "Hidden Input Under The Hood",
32
46
  padding_bottom: "sm"
@@ -38,7 +52,7 @@
38
52
  margin_bottom: "md",
39
53
  name: "currency_name",
40
54
  id: "example-currency",
41
- placeholder: "$0.00",
55
+ value: "$99.99",
42
56
  }) %>
43
57
 
44
58
  <style>
@@ -0,0 +1,39 @@
1
+ <%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
2
+ <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
3
+ <%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
4
+ <% end %>
5
+
6
+ <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
7
+ <%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
8
+ <% end %>
9
+
10
+ <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
11
+ <%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
12
+ <% end %>
13
+
14
+ <%= pb_rails("tooltip", props: {
15
+ trigger_element_selector: ".tooltip-delay",
16
+ tooltip_id: "delay-tooltip",
17
+ position: 'top',
18
+ delay_open: 1000,
19
+ delay_close: 1000
20
+ }) do %>
21
+ 1s open/close delay
22
+ <% end %>
23
+ <%= pb_rails("tooltip", props: {
24
+ trigger_element_selector: ".tooltip-open-delay",
25
+ tooltip_id: "open-tooltip",
26
+ position: 'top',
27
+ delay_open: 1000
28
+ }) do %>
29
+ 1s open delay
30
+ <% end %>
31
+ <%= pb_rails("tooltip", props: {
32
+ trigger_element_selector: ".tooltip-close-delay",
33
+ tooltip_id: "close-tooltip",
34
+ position: 'top',
35
+ delay_close: 1000
36
+ }) do %>
37
+ 1s close delay
38
+ <% end %>
39
+ <% end %>
@@ -0,0 +1,3 @@
1
+ Waits for the specified time when the event listener runs before triggering the tooltip.
2
+
3
+ The `delay_open` and `delay_close` accept numbers in milliseconds. 1 second is 1000 milliseconds.
@@ -0,0 +1,26 @@
1
+ <%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
2
+ <%= pb_rails("flex/flex_item") do %>
3
+ <%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
4
+
5
+ <%= pb_rails("tooltip", props: {
6
+ trigger_element_selector: "#tooltip-interaction",
7
+ tooltip_id: "tooltip-with-interaction",
8
+ position: 'top',
9
+ interaction: true
10
+ }) do %>
11
+ You can copy me
12
+ <% end %>
13
+ <% end %>
14
+
15
+ <%= pb_rails("flex/flex_item") do %>
16
+ <%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
17
+
18
+ <%= pb_rails("tooltip", props: {
19
+ trigger_element_selector: "#tooltip-no-interaction",
20
+ tooltip_id: "tooltip-without-interaction",
21
+ position: 'top',
22
+ }) do %>
23
+ I'm just a regular tooltip
24
+ <% end %>
25
+ <% end %>
26
+ <% end %>
@@ -2,8 +2,10 @@ examples:
2
2
 
3
3
  rails:
4
4
  - tooltip_default: Default
5
+ - tooltip_interaction: Content Interaction
5
6
  - tooltip_selectors: Using Common Selectors
6
7
  - tooltip_with_icon_circle: Icon Circle Tooltip
8
+ - tooltip_delay_rails: Delay
7
9
  - tooltip_show_tooltip: Show Tooltip
8
10
 
9
11
  react:
@@ -0,0 +1,45 @@
1
+ <%= pb_rails("select", props: {
2
+ id:"color_context_2",
3
+ label: "Choose a Color",
4
+ name: "color_name",
5
+ options: [
6
+ { value: "red", value_text: "Red" },
7
+ { value: "blue", value_text: "Blue" },
8
+ { value: "green", value_text: "Green" }
9
+ ],
10
+ }) %>
11
+
12
+ <%= pb_rails("typeahead", props: {
13
+ label: "Pick a Shade",
14
+ is_multi: false,
15
+ search_context_selector: "color_context_2",
16
+ options_by_context: {
17
+ "red": [
18
+ { label: "Scarlet", value: "scarlet" },
19
+ { label: "Mahogany", value: "mahogany" },
20
+ { label: "Crimson", value: "crimson" }
21
+ ],
22
+ "blue": [
23
+ { label: "Sky Blue", value: "sky" },
24
+ { label: "Cerulean", value: "cerulean" },
25
+ { label: "Navy", value: "navy" }
26
+ ],
27
+ "green": [
28
+ { label: "Emerald", value: "emerald" },
29
+ { label: "Mint", value: "mint" },
30
+ { label: "Olive", value: "olive" }
31
+ ]
32
+ },
33
+ id: "typeahead-dynamic-options",
34
+ }) %>
35
+
36
+
37
+ <%= javascript_tag defer: "defer" do %>
38
+ document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-option-select", function(event) {
39
+ console.log('Single Option selected')
40
+ console.dir(event.detail)
41
+ })
42
+ document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-clear", function() {
43
+ console.log('All options cleared')
44
+ })
45
+ <% end %>
@@ -0,0 +1,5 @@
1
+ You can also set up a typeahead to render options dynamically based on input from a select. To achieve this:
2
+ - The typeahead must have a unique `id`
3
+ - Use the `search_context_selector` prop on the typeahead. The value here must match the id of the select so the Typeahead knows where to read the current "context" from.
4
+ - Use `options_by_context` to pass in a hash whose keys match the possible values of your “context” select. Each key maps to an array of { label, value } objects. The typeahead automatically displays only the subset of options matching the current context.
5
+ - Additionally, the optional `clear_on_context_change` prop controls whether the typeahead clears or not when a change happens in the linked select. This prop is set to true by default so that whenever a selection is made in the select, the Typeahead automatically clears its current input/selection.
@@ -0,0 +1,33 @@
1
+ <%= pb_rails("select", props: {
2
+ id:"color_context",
3
+ label: "Choose a Color",
4
+ name: "color_name_2",
5
+ options: [
6
+ { value: "red", value_text: "Red" },
7
+ { value: "blue", value_text: "Blue" },
8
+ { value: "green", value_text: "Green" }
9
+ ],
10
+ }) %>
11
+
12
+ <%= pb_rails("typeahead", props: {
13
+ label: "Pick a Shade",
14
+ search_context_selector: "color_context",
15
+ options_by_context: {
16
+ "red": [
17
+ { label: "Scarlet", value: "scarlet" },
18
+ { label: "Mahogany", value: "mahogany" },
19
+ { label: "Crimson", value: "crimson" }
20
+ ],
21
+ "blue": [
22
+ { label: "Sky Blue", value: "sky" },
23
+ { label: "Cerulean", value: "cerulean" },
24
+ { label: "Navy", value: "navy" }
25
+ ],
26
+ "green": [
27
+ { label: "Emerald", value: "emerald" },
28
+ { label: "Mint", value: "mint" },
29
+ { label: "Olive", value: "olive" }
30
+ ]
31
+ },
32
+ search_term_minimum_length: 0,
33
+ }) %>
@@ -0,0 +1,3 @@
1
+ The dynamic rendering of options for the typeahead can also be achieved with a pure Rails implementation (not react rendered). For this implementation, use all the props as above with the following additions:
2
+
3
+ - `search_term_minimum_length`: this sets the minimum input in the typeahead needed to display the dropdown. This is set to 3 by default. Set it to 0 for the dropdown to always display when the typeahead is interacted with.
@@ -12,6 +12,8 @@ examples:
12
12
  - typeahead_margin_bottom: Margin Bottom
13
13
  - typeahead_with_pills_color: With Pills (Custom Color)
14
14
  - typeahead_truncated_text: Truncated Text
15
+ - typeahead_dynamic_options: Dynamic Options
16
+ - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
15
17
 
16
18
  react:
17
19
  - typeahead_default: Default