playbook_ui 14.13.0.pre.alpha.play1754pbtagprogressradio6121 → 14.13.0.pre.alpha.play1834depupdatesass6024

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -3
  3. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +2 -2
  4. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +1 -4
  5. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -2
  6. data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -2
  7. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -7
  8. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +3 -6
  9. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +2 -1
  10. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +3 -1
  11. data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_icon_button/icon_button.rb +0 -3
  13. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +6 -1
  14. data/app/pb_kits/playbook/pb_nav/item.html.erb +19 -7
  15. data/app/pb_kits/playbook/pb_nav/nav.html.erb +8 -3
  16. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +6 -1
  17. data/app/pb_kits/playbook/pb_popover/popover.html.erb +6 -1
  18. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +6 -1
  19. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +11 -4
  20. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +5 -1
  21. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +5 -1
  22. data/app/pb_kits/playbook/pb_radio/radio.html.erb +11 -5
  23. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -4
  24. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -3
  25. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +2 -29
  26. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +3 -31
  27. data/app/pb_kits/playbook/pb_table/table_body.html.erb +7 -13
  28. data/app/pb_kits/playbook/pb_table/table_body.rb +0 -2
  29. data/app/pb_kits/playbook/pb_table/table_row.html.erb +7 -13
  30. data/app/pb_kits/playbook/pb_table/table_row.rb +0 -4
  31. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +0 -14
  32. data/app/pb_kits/playbook/pb_text_input/index.js +0 -9
  33. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -5
  34. data/dist/chunks/{_typeahead-C_q1qAtC.js → _typeahead-DQTwAd_2.js} +4 -4
  35. data/dist/chunks/_weekday_stacked-CnPEqV7l.js +45 -0
  36. data/dist/chunks/vendor.js +1 -1
  37. data/dist/playbook-doc.js +1 -1
  38. data/dist/playbook-rails-react-bindings.js +1 -1
  39. data/dist/playbook-rails.js +1 -1
  40. data/lib/playbook/version.rb +1 -1
  41. metadata +4 -13
  42. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +0 -90
  43. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +0 -5
  44. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +0 -27
  45. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +0 -47
  46. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +0 -88
  47. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +0 -1
  48. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +0 -96
  49. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +0 -101
  50. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +0 -1
  51. data/dist/chunks/_weekday_stacked-DCeouuO3.js +0 -45
data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx DELETED
@@ -1,101 +0,0 @@
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 DELETED
@@ -1 +0,0 @@
1
- Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.