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

Sign up to get free protection for your applications and to get access to all the features.
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"