playbook_ui 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 (16) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/_card.scss +0 -5
  3. data/app/pb_kits/playbook/pb_card/_card.tsx +9 -56
  4. data/app/pb_kits/playbook/pb_docs/kit_example.rb +3 -1
  5. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +2 -2
  6. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +1 -1
  8. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +7 -7
  9. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +32 -13
  10. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +5 -5
  11. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +1 -1
  12. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +5 -5
  13. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +3 -1
  14. data/dist/playbook-rails.js +6 -6
  15. data/lib/playbook/version.rb +1 -1
  16. metadata +1 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 036170dadbbd8b05c35417170d192e64d34f892e7253cddbb57d4c7f0ce85434
4
- data.tar.gz: db3c4d9d19bc7ffc2ece4579e08ce0bb61ad0d58d363411bd06aa73e09d1c741
3
+ metadata.gz: 380bc9dbd82972a5698de51d570cdfa2487487e31ae0f45b412dfb9d1279e886
4
+ data.tar.gz: be0a2d1f71353e2b24d0f2741bff4febb39ac02734390403c54fe2ebd3a89312
5
5
  SHA512:
6
- metadata.gz: 4db2db76e7bf5efa142e6cf98f086b8d4ad9c06a52e160084dfce38fa1f65918c03617b29f1d70af22d5e0d2929c642d047fb530558bf42a58489fcbea0961e4
7
- data.tar.gz: afb25d863537751a54cb64f7aaa8780c56153582942f2a2e4657a1312f87cd7aefd7b284c14949260a69382880c278b682aaa6e11ac23980ccaee315f4c9d4f5
6
+ metadata.gz: 929cda18e0b40680958fb5191785efd526c02d7fff5a04a2007d27ab9913425f6c2068d3084e66572056d7b6e22bac471dccf8f081bcb4000fe3673080b232ad
7
+ data.tar.gz: 01eb9044256743a84f1d3b34439ef8402db96f39e2c175b65996381307a7f467cdbb352a98afc634ab30996195a818691a59340846ba2a1c23b4c879d825383b
data/app/pb_kits/playbook/pb_card/_card.scss CHANGED
@@ -81,9 +81,4 @@
81
81
  }
82
82
  }
83
83
  }
84
-
85
- .card_draggable_handle {
86
- align-self: center;
87
- color: $text_lt_light;
88
- }
89
84
  }
data/app/pb_kits/playbook/pb_card/_card.tsx CHANGED
@@ -8,10 +8,6 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
8
8
  import { GlobalProps, globalProps } from '../utilities/globalProps'
9
9
  import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
10
10
 
11
- import Icon from '../pb_icon/_icon'
12
- import Flex from '../pb_flex/_flex'
13
- import Draggable from '../pb_draggable/_draggable'
14
-
15
11
  type CardPropTypes = {
16
12
  aria?: {[key: string]: string},
17
13
  background?: BackgroundColors | ProductColors | "none",
@@ -20,14 +16,11 @@ type CardPropTypes = {
20
16
  children: React.ReactChild[] | React.ReactChild | number,
21
17
  className?: string,
22
18
  data?: {[key: string]: string},
23
- draggableItem?: boolean,
24
- dragHandle?: boolean,
25
19
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
26
20
  highlight?: {
27
21
  position?: "side" | "top",
28
22
  color?: string,
29
23
  },
30
- id?: string,
31
24
  length?: number,
32
25
  padding?: string,
33
26
  selected?: boolean,
@@ -85,11 +78,8 @@ const Card = (props: CardPropTypes): React.ReactElement => {
85
78
  children,
86
79
  className,
87
80
  data = {},
88
- dragHandle = true,
89
- draggableItem = false,
90
81
  highlight = {},
91
82
  htmlOptions = {},
92
- id,
93
83
  selected = false,
94
84
  tag = 'div',
95
85
  } = props
@@ -123,52 +113,15 @@ const Card = (props: CardPropTypes): React.ReactElement => {
123
113
  const Tag = tagOptions.includes(tag) ? tag : 'div'
124
114
 
125
115
  return (
126
- <>
127
- {
128
- draggableItem ? (
129
- <Draggable.Item id={id}
130
- key={id}
131
- >
132
- <Tag
133
- {...ariaProps}
134
- {...dataProps}
135
- {...htmlProps}
136
- className={classnames(cardCss, globalProps(props), className)}
137
- >
138
- {subComponentTags('Header')}
139
- {
140
- dragHandle ? (
141
- <Flex>
142
- <span className="card_draggable_handle">
143
- <Icon
144
- icon="grip-dots-vertical"
145
- paddingRight="xs"
146
- verticalAlign="middle"
147
- />
148
- </span>
149
- <div style={{width: '100%'}}>
150
- {nonHeaderChildren}
151
- </div>
152
- </Flex>
153
- ) : (
154
- nonHeaderChildren
155
- )
156
- }
157
- </Tag>
158
- </Draggable.Item>
159
- ) : (
160
- <Tag
161
- {...ariaProps}
162
- {...dataProps}
163
- {...htmlProps}
164
- className={classnames(cardCss, globalProps(props), className)}
165
- >
166
- {subComponentTags('Header')}
167
- {nonHeaderChildren}
168
- </Tag>
169
- )
170
- }
171
- </>
116
+ <Tag
117
+ {...ariaProps}
118
+ {...dataProps}
119
+ {...htmlProps}
120
+ className={classnames(cardCss, globalProps(props), className)}
121
+ >
122
+ {subComponentTags('Header')}
123
+ {nonHeaderChildren}
124
+ </Tag>
172
125
  )
173
126
  }
174
127
 
data/app/pb_kits/playbook/pb_docs/kit_example.rb CHANGED
@@ -1,7 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  # rubocop:disable Style/CaseLikeIf
4
-
5
4
  module Playbook
6
5
  module PbDocs
7
6
  class KitExample < Playbook::KitBase
@@ -12,6 +11,8 @@ module Playbook
12
11
  prop :type, type: Playbook::Props::Enum, values: %w[rails react swift], default: "rails"
13
12
  prop :dark, type: Playbook::Props::Boolean, default: false
14
13
 
14
+ include PlaybookWebsite::Markdown::Helper
15
+
15
16
  def example
16
17
  if type == "rails"
17
18
  render inline: source
@@ -60,6 +61,7 @@ module Playbook
60
61
  .gsub("'../..'", "'playbook-ui'")
61
62
  .gsub(%r{from "../.*}, "from 'playbook-ui'")
62
63
  .gsub(%r{from '../.*}, "from 'playbook-ui'")
64
+ .gsub("'../../../../../../playbook-website/app/javascript/scripts/custom-icons'", "'your-directory/custom-icons.js'")
63
65
  stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
64
66
  if stringified_code.include?("props: { ")
65
67
  stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark
data/app/pb_kits/playbook/pb_draggable/context/index.tsx CHANGED
@@ -6,7 +6,7 @@ export const DraggableContext = () => {
6
6
  return useContext(DragContext);
7
7
  };
8
8
 
9
- export const DraggableProvider = ({ children, initialItems, onReorder }: any) => {
9
+ export const DraggableProvider = ({ children, initialItems, onChange }: any) => {
10
10
  const [items, setItems] = useState([]);
11
11
  const [dragData, setDragData] = useState<{ [key: string]: any }>({});
12
12
  const [isDragging, setIsDragging] = useState("");
@@ -17,7 +17,7 @@ export const DraggableProvider = ({ children, initialItems, onReorder }: any) =>
17
17
  }, [initialItems]);
18
18
 
19
19
  useEffect(() => {
20
- onReorder(items);
20
+ onChange(items);
21
21
  }, [items]);
22
22
 
23
23
  const handleDragStart = (id: string, container: string) => {
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"
data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx CHANGED
@@ -31,10 +31,12 @@ const DefaultDraggableKit = () => {
31
31
  return (
32
32
  <DraggableProvider
33
33
  initialItems={data}
34
- onReorder={(items) => setInitialState(items)}
34
+ onChange={(items) => setInitialState(items)}
35
35
  >
36
36
  <Draggable
37
37
  data={{ testid: testId }}
38
+ draggableItems={data}
39
+ onDragChange={(items) => setInitialItems(items)}
38
40
  >
39
41
  <Draggable.Container>
40
42
  <SelectableList variant="checkbox">