playbook_ui_docs 14.12.0.pre.rc.12 → 14.13.0.pre.alpha.PBNTR5596084

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 (76) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +33 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md +1 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading.md → _advanced_table_loading_react.md} +2 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb +38 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -0
  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.jsx +55 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +3 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  12. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +9 -3
  13. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +6 -2
  14. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +2 -0
  15. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +21 -0
  16. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +5 -0
  17. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +45 -0
  18. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md +1 -0
  19. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +8 -0
  20. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -0
  21. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +2 -1
  22. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +13 -5
  23. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb +99 -0
  24. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +1 -0
  25. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +1 -3
  26. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +7 -0
  27. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +61 -0
  28. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -0
  29. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +90 -0
  30. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +5 -0
  31. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -5
  32. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  33. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +58 -0
  34. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md +3 -0
  35. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +1 -0
  36. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +11 -0
  37. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +22 -0
  38. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +1 -0
  39. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +1 -0
  40. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +2 -0
  41. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  42. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +1 -2
  43. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +27 -0
  44. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +1 -3
  45. data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +15 -0
  46. data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +29 -0
  47. data/app/pb_kits/playbook/pb_link/docs/example.yml +5 -3
  48. data/app/pb_kits/playbook/pb_link/docs/index.js +2 -1
  49. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
  50. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +6 -9
  51. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +6 -9
  52. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +47 -0
  53. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +88 -0
  54. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +1 -0
  55. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +12 -8
  56. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb +52 -0
  57. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md +0 -0
  58. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb +52 -0
  59. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -0
  60. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb +80 -0
  61. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -0
  62. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +96 -0
  63. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
  64. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
  65. data/app/pb_kits/playbook/pb_table/docs/example.yml +7 -0
  66. data/app/pb_kits/playbook/pb_table/docs/index.js +3 -1
  67. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +1 -1
  68. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
  69. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb +42 -0
  70. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +59 -0
  71. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md +2 -0
  72. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  73. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  74. data/dist/playbook-doc.js +1 -1
  75. metadata +46 -4
  76. /data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/{_fixed_confirmation_toast_auto_close.md → _fixed_confirmation_toast_auto_close_react.md} +0 -0
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx CHANGED
@@ -8,27 +8,31 @@ const TableWithCollapsibleWithCustomContent = (props) => {
8
8
  <Card
9
9
  borderNone
10
10
  borderRadius="none"
11
- color="light"
11
+ color="light"
12
12
  paddingX="xl"
13
13
  paddingY="md"
14
14
  {...props}
15
15
  >
16
- <Body paddingBottom="sm"
16
+ <Body paddingBottom="sm"
17
17
  text="Expanded Custom Layout"
18
18
  {...props}
19
19
  />
20
20
  <Flex justify="between">
21
21
  <Image
22
- url="https://via.placeholder.com/150"
22
+ size="sm"
23
+ url="https://unsplash.it/500/400/?image=634"
23
24
  />
24
25
  <Image
25
- url="https://via.placeholder.com/150"
26
+ size="sm"
27
+ url="https://unsplash.it/500/400/?image=634"
26
28
  />
27
29
  <Image
28
- url="https://via.placeholder.com/150"
30
+ size="sm"
31
+ url="https://unsplash.it/500/400/?image=634"
29
32
  />
30
33
  <Image
31
- url="https://via.placeholder.com/150"
34
+ size="sm"
35
+ url="https://unsplash.it/500/400/?image=634"
32
36
  />
33
37
  </Flex>
34
38
  </Card>
@@ -52,7 +56,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
52
56
 
53
57
  </Table.Head>
54
58
  <Table.Body>
55
- <Table.Row collapsible
59
+ <Table.Row collapsible
56
60
  collapsibleContent={<Content/>}
57
61
  {...props}
58
62
  >
@@ -61,7 +65,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
61
65
  <Table.Cell>{'Value 3'}</Table.Cell>
62
66
  <Table.Cell>{'Value 4'}</Table.Cell>
63
67
  <Table.Cell>{'Value 5'}</Table.Cell>
64
- <Table.Cell textAlign="right">{
68
+ <Table.Cell textAlign="right">{
65
69
  <Icon
66
70
  color="primary"
67
71
  fixedWidth
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb ADDED
@@ -0,0 +1,52 @@
1
+ <% content = capture do %>
2
+ <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
3
+ <%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
4
+ <%= pb_rails("flex", props: { justify: "between" }) do %>
5
+ <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
6
+ <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
7
+ <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
8
+ <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
9
+ <% end %>
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", props: { text: "Column 1"}) %>
17
+ <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
18
+ <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
19
+ <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
20
+ <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
21
+ <%= pb_rails("table/table_header", props: { text: ""}) %>
22
+ <% end %>
23
+ <% end %>
24
+ <%= pb_rails("table/table_body") do %>
25
+ <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) do %>
26
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
27
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
28
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
29
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
30
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
31
+ <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
32
+ <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
33
+ <% end %>
34
+ <% end %>
35
+ <%= pb_rails("table/table_row") do %>
36
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
37
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
38
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
39
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
40
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
41
+ <%= pb_rails("table/table_cell", props: { text: ""}) %>
42
+ <% end %>
43
+ <%= pb_rails("table/table_row") do %>
44
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
45
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
46
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
47
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
48
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
49
+ <%= pb_rails("table/table_cell", props: { text: ""}) %>
50
+ <% end %>
51
+ <% end %>
52
+ <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb ADDED
@@ -0,0 +1,52 @@
1
+ <% content = capture do %>
2
+ <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
3
+ <%= pb_rails("background", props: { tag: "tr" }) do %>
4
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
5
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
6
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
7
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
8
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
9
+ <% end %>
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", props: { text: "Column 1"}) %>
17
+ <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
18
+ <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
19
+ <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
20
+ <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
21
+ <%= pb_rails("table/table_header", props: { text: ""}) %>
22
+ <% end %>
23
+ <% end %>
24
+ <%= pb_rails("table/table_body") do %>
25
+ <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
26
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
27
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
28
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
29
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
30
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
31
+ <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
32
+ <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
33
+ <% end %>
34
+ <% end %>
35
+ <%= pb_rails("table/table_row") do %>
36
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
37
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
38
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
39
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
40
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
41
+ <%= pb_rails("table/table_cell", props: { text: ""}) %>
42
+ <% end %>
43
+ <%= pb_rails("table/table_row") do %>
44
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
45
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
46
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
47
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
48
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
49
+ <%= pb_rails("table/table_cell", props: { text: ""}) %>
50
+ <% end %>
51
+ <% end %>
52
+ <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md ADDED
@@ -0,0 +1,3 @@
1
+ The `collapsible_content` can display any content, including nested Table Rows.
2
+
3
+ Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb ADDED
@@ -0,0 +1,80 @@
1
+ <% content = capture do %>
2
+ <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
3
+ <%= pb_rails("table/table_head") do %>
4
+ <%= pb_rails("background", props: { tag: "tr" }) do %>
5
+ <%= pb_rails("table/table_header") do %>Alt Header<% end %>
6
+ <%= pb_rails("table/table_header") do %>Alt Header<% end %>
7
+ <%= pb_rails("table/table_header") do %>Alt Header<% end %>
8
+ <%= pb_rails("table/table_header") do %>Alt Header<% end %>
9
+ <% end %>
10
+ <% end %>
11
+ <%= pb_rails("table/table_body") do %>
12
+ <%= pb_rails("table/table_row") do %>
13
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
14
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
15
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
16
+ <%= pb_rails("table/table_cell") do %>
17
+ <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
18
+ <% end %>
19
+ <% end %>
20
+ <%= pb_rails("table/table_row") do %>
21
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
22
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
23
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
24
+ <%= pb_rails("table/table_cell") do %>
25
+ <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
26
+ <% end %>
27
+ <% end %>
28
+ <%= pb_rails("table/table_row") do %>
29
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
30
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
31
+ <%= pb_rails("table/table_cell") do %>Expanded<% end %>
32
+ <%= pb_rails("table/table_cell") do %>
33
+ <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
34
+ <% end %>
35
+ <% end %>
36
+ <% end %>
37
+ <% end %>
38
+ <% end %>
39
+
40
+
41
+ <%= pb_rails("table", props: { size: "sm" }) do %>
42
+ <%= pb_rails("table/table_head") do %>
43
+ <%= pb_rails("table/table_row") do %>
44
+ <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
45
+ <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
46
+ <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
47
+ <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
48
+ <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
49
+ <%= pb_rails("table/table_header", props: { text: ""}) %>
50
+ <% end %>
51
+ <% end %>
52
+ <%= pb_rails("table/table_body") do %>
53
+ <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) do %>
54
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
55
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
56
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
57
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
58
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
59
+ <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
60
+ <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
61
+ <% end %>
62
+ <% end %>
63
+ <%= pb_rails("table/table_row") do %>
64
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
65
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
66
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
67
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
68
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
69
+ <%= pb_rails("table/table_cell", props: { text: ""}) %>
70
+ <% end %>
71
+ <%= pb_rails("table/table_row") do %>
72
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
73
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
74
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
75
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
76
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
77
+ <%= pb_rails("table/table_cell", props: { text: ""}) %>
78
+ <% end %>
79
+ <% end %>
80
+ <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md ADDED
@@ -0,0 +1 @@
1
+ The `collapsible_content` can also be used to display nested Tables within each Row.
data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb ADDED
@@ -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>
data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md ADDED
@@ -0,0 +1 @@
1
+ Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.
data/app/pb_kits/playbook/pb_table/docs/example.yml CHANGED
@@ -31,6 +31,11 @@ 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_content_rails: Table with Collapsible with Custom Content
35
+ - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
36
+ - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
37
+ - table_with_clickable_rows: Table with Clickable Rows
38
+ - table_with_selectable_rows: Table with Selectable Rows
34
39
 
35
40
  react:
36
41
  - table_sm: Small
@@ -67,3 +72,5 @@ examples:
67
72
  - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
68
73
  - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
69
74
  - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
75
+ - table_with_clickable_rows: Table with Clickable Rows
76
+ - table_with_selectable_rows: Table with Selectable Rows
data/app/pb_kits/playbook/pb_table/docs/index.js CHANGED
@@ -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'
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb CHANGED
@@ -38,7 +38,7 @@
38
38
  margin_bottom: "md",
39
39
  name: "currency_name",
40
40
  id: "example-currency",
41
- placeholder: "$0.00",
41
+ value: "$99.99",
42
42
  }) %>
43
43
 
44
44
  <style>
data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb CHANGED
@@ -43,4 +43,4 @@
43
43
  Whoa. I'm a tooltip.
44
44
  <% end %>
45
45
  <% end %>
46
- <% end %>
46
+ <% end %>
data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb ADDED
@@ -0,0 +1,42 @@
1
+ <div class="pb--doc-demo-row">
2
+ <div>
3
+ <%= pb_rails("user", props: {
4
+ name: "Anna Black",
5
+ title: "Remodeling Consultant",
6
+ orientation: "vertical",
7
+ align: "center",
8
+ size: "lg",
9
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
10
+ bold: false
11
+ }) %>
12
+ </div>
13
+ <div>
14
+ <%= pb_rails("user", props: {
15
+ name: "Anna Black",
16
+ title: "Remodeling Consultant",
17
+ orientation: "horizontal",
18
+ align: "left",
19
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
20
+ bold: false
21
+ }) %>
22
+ </div>
23
+ <div>
24
+ <%= pb_rails("user", props: {
25
+ name: "Anna Black",
26
+ orientation: "horizontal",
27
+ align: "left",
28
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
29
+ bold: false
30
+ }) %>
31
+
32
+ <br>
33
+
34
+ <%= pb_rails("user", props: {
35
+ name: "Anna Black",
36
+ orientation: "horizontal",
37
+ align: "left",
38
+ avatar: true,
39
+ bold: false
40
+ }) %>
41
+ </div>
42
+ </div>
data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx ADDED
@@ -0,0 +1,59 @@
1
+ import React from 'react'
2
+ import { User } from 'playbook-ui'
3
+
4
+ const UserLightWeight = (props) => {
5
+ return (
6
+ <div className="pb--doc-demo-row">
7
+
8
+ <div>
9
+ <User
10
+ align="center"
11
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
12
+ bold={false}
13
+ name="Anna Black"
14
+ orientation="vertical"
15
+ size="lg"
16
+ title="Remodeling Consultant"
17
+ {...props}
18
+ />
19
+ </div>
20
+
21
+ <div>
22
+ <User
23
+ align="left"
24
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
25
+ bold={false}
26
+ name="Anna Black"
27
+ orientation="horizontal"
28
+ title="Remodeling Consultant"
29
+ {...props}
30
+ />
31
+ </div>
32
+
33
+ <div>
34
+ <User
35
+ align="left"
36
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
37
+ bold={false}
38
+ name="Anna Black"
39
+ orientation="horizontal"
40
+ {...props}
41
+ />
42
+
43
+ <br />
44
+
45
+ <User
46
+ align="left"
47
+ avatar
48
+ bold={false}
49
+ name="Anna Black"
50
+ orientation="horizontal"
51
+ {...props}
52
+ />
53
+ </div>
54
+
55
+ </div>
56
+ )
57
+ }
58
+
59
+ export default UserLightWeight
data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md ADDED
@@ -0,0 +1,2 @@
1
+ ##### Prop
2
+ Name will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`. Name will then use `font-weight: 300`.
data/app/pb_kits/playbook/pb_user/docs/example.yml CHANGED
@@ -2,6 +2,7 @@ examples:
2
2
 
3
3
  rails:
4
4
  - user_default: Default
5
+ - user_light_weight: Light Weight
5
6
  - user_with_territory: With Territory
6
7
  - user_text_only: Text Only
7
8
  - user_size: Horizontal Size
@@ -11,6 +12,7 @@ examples:
11
12
 
12
13
  react:
13
14
  - user_default: Default
15
+ - user_light_weight: Light Weight
14
16
  - user_with_territory: With Territory
15
17
  - user_text_only: Text Only
16
18
  - user_size: Horizontal Size
data/app/pb_kits/playbook/pb_user/docs/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { default as UserDefault } from './_user_default.jsx'
2
+ export { default as UserLightWeight } from './_user_light_weight.jsx'
2
3
  export { default as UserWithTerritory } from './_user_with_territory.jsx'
3
4
  export { default as UserTextOnly } from './_user_text_only.jsx'
4
5
  export { default as UserSize } from './_user_size.jsx'