playbook_ui_docs 13.29.0.pre.alpha.PBNTR329draggablev33059 → 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 -14
  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: 10c14d9c29cafc933037cf345a94d8c793de8a2c806240a9ac1fcb52c65ed3ff
4
- data.tar.gz: ce6c43f50cd194c89827aab59a44a1214f8b1821f9a2bc8e0efe7e826897a336
3
+ metadata.gz: 774b28287de8936546bbb84d72acae2861e4ad94cc3e1b1d9ba6e05c69293e77
4
+ data.tar.gz: 18d0c520b311bf65ee4579e5030ba081c9de2a27071d2f2f42bdbfa4fd97dcf9
5
5
  SHA512:
6
- metadata.gz: 217751cb8fbd57472ce3c0f765e4f81c171084cbe4804cfdea13978918a60a6f90c1d42d0f45693e2499ab0c8316f296963028afbb881c6dce7629808acdc8bd
7
- data.tar.gz: 072247251edc16e23358ddcf8cdf63cd0883c583b03d68aa311a08bbf6b1ee151cb40c79742295ce5a33a2908fd9979944ffd091ad4bc27e99019a9811d67314
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,35 +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
- dragHandle
41
- draggableItem
42
- highlight={{ color: "primary", position: "side" }}
43
- id={id}
44
- key={id}
43
+ highlight={{ position: "side", color: "primary" }}
45
44
  marginBottom="xs"
46
- padding="xs"
47
45
  >
48
46
  <Flex alignItems="stretch"
49
47
  flexDirection="column"
50
- >
48
+ >
51
49
  <Flex gap="xs">
52
50
  <Title size={4}
53
51
  text={text}
54
- />
52
+ />
55
53
  <Badge
56
54
  text="35-12345"
57
55
  variant="primary"
58
- />
56
+ />
59
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">
60
68
  <Caption
61
69
  size="xs"
62
- text="8:00A • Township Name • 90210"
70
+ text="Township Name"
71
+ />
72
+ <Caption size="xs"
73
+ text="•"
63
74
  />
75
+ <Caption size="xs"
76
+ text="90210"
77
+ />
78
+ </Flex>
79
+ </Flex>
80
+
64
81
  <Flex gap="xxs"
65
82
  spacing="between"
66
83
  >
@@ -92,6 +109,7 @@ const DraggableWithCards = (props) => {
92
109
  </Flex>
93
110
  </Flex>
94
111
  </Card>
112
+ </Draggable.Item>
95
113
  ))}
96
114
  </Draggable.Container>
97
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"