playbook_ui_docs 13.29.0.pre.alpha.PBNTR329draggablev33060 → 13.29.0.pre.alpha.removeduplicatekitexampleclass3063

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 (11) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +1 -1
  3. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +1 -1
  4. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +7 -7
  5. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +32 -13
  6. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +5 -5
  7. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +1 -1
  8. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +5 -5
  9. data/dist/playbook-doc.js +8 -8
  10. metadata +1 -2
  11. data/dist/app/components/playbook/pb_docs/kit_example.rb +0 -78
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0af3168a2c846f6f584a447387422324baeb28e75946e91c9978e4d5219545b1
4
- data.tar.gz: 36531f82cae3cbd083a54d7a395e1085d06dcadef4e5afa627e638bcd3f5be54
3
+ metadata.gz: 774b28287de8936546bbb84d72acae2861e4ad94cc3e1b1d9ba6e05c69293e77
4
+ data.tar.gz: 18d0c520b311bf65ee4579e5030ba081c9de2a27071d2f2f42bdbfa4fd97dcf9
5
5
  SHA512:
6
- metadata.gz: ee411ec9df3266b3adc8decc46346f795fc28bdced0e6379fddce4cd80d36f99185916938839056d070e63e624851977ad82ab82358e50667e2f9f072899e666
7
- data.tar.gz: c3666e60a18f02a5c24f3ebed36dd9caa8a42503d4d1a779ec150347001ad6014b326c9151b930b669768aac24291811b67d2cb0271f24b43f2423600502adb0
6
+ metadata.gz: 48b3800c5ec794c25f86de8f98cc8a9eda7f3b267139ea96725449b0fc29f7bd9ddeb8098f52f936f7dd70b1e7716778d736b04d92f3479a125e07cab2f28b76
7
+ data.tar.gz: f4220d2208e01ffda784a3ea012538baabcc5828d5330c1137470d5c02796dad2c00e2472f2fc3ef42fcdb32f9abfb0e13920eb7d871e86a4daf1f18b68b4dd0
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx CHANGED
@@ -27,7 +27,7 @@ const DraggableDefault = (props) => {
27
27
  return (
28
28
  <>
29
29
  <DraggableProvider initialItems={data}
30
- onReorder={(items) => setInitialState(items)}
30
+ onChange={(items) => setInitialState(items)}
31
31
  >
32
32
  <Draggable.Container {...props}>
33
33
  <SelectableList variant="checkbox">
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md CHANGED
@@ -1,4 +1,4 @@
1
- To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onReorder` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
1
+ To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onChange` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
2
2
 
3
3
  The `Draggable.Container` specifies the container within which items can be dropped.
4
4
  The `Draggable.Item` specifies the items that can be dragged and dropped. `Draggable.Item` requires `id` to be passed in as shown.
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx CHANGED
@@ -18,7 +18,7 @@ const containers = ["To Do", "In Progress", "Done"];
18
18
  // Initial items to be dragged
19
19
  const data = [
20
20
  {
21
- id: "11",
21
+ id: "1",
22
22
  container: "To Do",
23
23
  title: "Task 1",
24
24
  description: "Bug fixes",
@@ -26,7 +26,7 @@ const data = [
26
26
  assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
27
27
  },
28
28
  {
29
- id: "12",
29
+ id: "2",
30
30
  container: "To Do",
31
31
  title: "Task 2",
32
32
  description: "Documentation",
@@ -34,7 +34,7 @@ const data = [
34
34
  assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
35
35
  },
36
36
  {
37
- id: "13",
37
+ id: "3",
38
38
  container: "In Progress",
39
39
  title: "Task 3",
40
40
  description: "Add a variant",
@@ -42,7 +42,7 @@ const data = [
42
42
  assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
43
43
  },
44
44
  {
45
- id: "14",
45
+ id: "4",
46
46
  container: "To Do",
47
47
  title: "Task 4",
48
48
  description: "Add jest tests",
@@ -50,7 +50,7 @@ const data = [
50
50
  assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
51
51
  },
52
52
  {
53
- id: "15",
53
+ id: "5",
54
54
  container: "Done",
55
55
  title: "Task 5",
56
56
  description: "Alpha testing",
@@ -58,7 +58,7 @@ const data = [
58
58
  assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
59
59
  },
60
60
  {
61
- id: "16",
61
+ id: "6",
62
62
  container: "In Progress",
63
63
  title: "Task 6",
64
64
  description: "Release",
@@ -83,7 +83,7 @@ const DraggableMultipleContainer = (props) => {
83
83
 
84
84
  return (
85
85
  <DraggableProvider initialItems={data}
86
- onReorder={(items) => setInitialState(items)}
86
+ onChange={(items) => setInitialState(items)}
87
87
  >
88
88
  <Flex
89
89
  justifyContent="center"
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx CHANGED
@@ -13,15 +13,15 @@ import {
13
13
  // Initial items to be dragged
14
14
  const data = [
15
15
  {
16
- id: "21",
16
+ id: "1",
17
17
  text: "Joe Black",
18
18
  },
19
19
  {
20
- id: "22",
20
+ id: "2",
21
21
  text: "Nancy White",
22
22
  },
23
23
  {
24
- id: "23",
24
+ id: "3",
25
25
  text: "Bill Green",
26
26
  },
27
27
  ];
@@ -32,34 +32,52 @@ const DraggableWithCards = (props) => {
32
32
  return (
33
33
  <DraggableProvider
34
34
  initialItems={data}
35
- onReorder={(items) => setInitialState(items)}
35
+ onChange={(items) => setInitialState(items)}
36
36
  >
37
37
  <Draggable.Container {...props}>
38
38
  {initialState.map(({ id, text }) => (
39
+ <Draggable.Item id={id}
40
+ key={id}
41
+ >
39
42
  <Card
40
- draggableItem
41
- highlight={{ color: "primary", position: "side" }}
42
- id={id}
43
- key={id}
43
+ highlight={{ position: "side", color: "primary" }}
44
44
  marginBottom="xs"
45
- padding="xs"
46
45
  >
47
46
  <Flex alignItems="stretch"
48
47
  flexDirection="column"
49
- >
48
+ >
50
49
  <Flex gap="xs">
51
50
  <Title size={4}
52
51
  text={text}
53
- />
52
+ />
54
53
  <Badge
55
54
  text="35-12345"
56
55
  variant="primary"
57
- />
56
+ />
58
57
  </Flex>
58
+
59
+ <Flex
60
+ gap="sm"
61
+ spacing="between"
62
+ >
63
+ <Caption
64
+ size="xs"
65
+ text="8:00A"
66
+ />
67
+ <Flex gap="xxs">
59
68
  <Caption
60
69
  size="xs"
61
- text="8:00A • Township Name • 90210"
70
+ text="Township Name"
71
+ />
72
+ <Caption size="xs"
73
+ text="•"
62
74
  />
75
+ <Caption size="xs"
76
+ text="90210"
77
+ />
78
+ </Flex>
79
+ </Flex>
80
+
63
81
  <Flex gap="xxs"
64
82
  spacing="between"
65
83
  >
@@ -91,6 +109,7 @@ const DraggableWithCards = (props) => {
91
109
  </Flex>
92
110
  </Flex>
93
111
  </Card>
112
+ </Draggable.Item>
94
113
  ))}
95
114
  </Draggable.Container>
96
115
  </DraggableProvider>
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx CHANGED
@@ -4,19 +4,19 @@ import { DraggableProvider, List, ListItem } from "../../";
4
4
  // Initial items to be dragged
5
5
  const data = [
6
6
  {
7
- id: "31",
7
+ id: "1",
8
8
  text: "Philadelphia",
9
9
  },
10
10
  {
11
- id: "32",
11
+ id: "2",
12
12
  text: "New Jersey",
13
13
  },
14
14
  {
15
- id: "33",
15
+ id: "3",
16
16
  text: "Maryland",
17
17
  },
18
18
  {
19
- id: "34",
19
+ id: "4",
20
20
  text: "Connecticut",
21
21
  },
22
22
  ];
@@ -28,7 +28,7 @@ const DraggableWithList = (props) => {
28
28
  return (
29
29
  <>
30
30
  <DraggableProvider initialItems={data}
31
- onReorder={(items) => setInitialState(items)}
31
+ onChange={(items) => setInitialState(items)}
32
32
  >
33
33
  <List draggable
34
34
  {...props}
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md CHANGED
@@ -1 +1 @@
1
- For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem.
1
+ For a simplified version of the Draggable API fro the List kit, use the DraggableProvider to wrap the List use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem.
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx CHANGED
@@ -4,19 +4,19 @@ import { SelectableList, DraggableProvider } from "../../";
4
4
  // Initial items to be dragged
5
5
  const data = [
6
6
  {
7
- id: "41",
7
+ id: "1",
8
8
  text: "Task 1",
9
9
  },
10
10
  {
11
- id: "42",
11
+ id: "2",
12
12
  text: "Task 2",
13
13
  },
14
14
  {
15
- id: "43",
15
+ id: "3",
16
16
  text: "Task 3",
17
17
  },
18
18
  {
19
- id: "44",
19
+ id: "4",
20
20
  text: "Task 4",
21
21
  },
22
22
  ];
@@ -27,7 +27,7 @@ const DraggableWithSelectableList = (props) => {
27
27
  return (
28
28
  <>
29
29
  <DraggableProvider initialItems={data}
30
- onReorder={(items) => setInitialState(items)}
30
+ onChange={(items) => setInitialState(items)}
31
31
  >
32
32
  <SelectableList draggable
33
33
  variant="checkbox"