playbook_ui_docs 12.26.1.pre.alpha.railsmultilevelimprovements837 → 12.26.1.pre.alpha.railsmultilevelimprovements842

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 (21) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +4 -5
  3. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +4 -8
  4. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +4 -8
  5. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -4
  6. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +12 -18
  9. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -2
  10. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +2 -2
  11. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +19 -23
  12. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -2
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -2
  16. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +1 -2
  17. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +1 -2
  18. data/dist/playbook-doc.js +8 -8
  19. metadata +2 -4
  20. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb +0 -73
  21. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx +0 -87
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 528a30acbc18da5e9b9d97680bb960f47369d3d4ed62254e360aa80b0edc766d
4
- data.tar.gz: 2677edc6eb85e4213da95e2f66d5e81e855d533fd481c359bfab8ca7550b247d
3
+ metadata.gz: d94144a9a9f325a5d8b2f055ca2daf634c6eb8ce5888a32fec3b8db19d1763a8
4
+ data.tar.gz: b11f4d5af9120a1b72eff85368d155a0877191b2a362d74329cd2de23c9b42f4
5
5
  SHA512:
6
- metadata.gz: 885ed671c3d826f1564e922502d30c39d813345a717f455a594bddb1b3b3dfbd90acb941d66bc1a3c9078642a3eefe84592de56a2c96c30e0bc89cb582004947
7
- data.tar.gz: e04a8085dbe8a95f87aa2de8cd5cb2649a885a5b41dd544d692467fc915cc0a2444dde7b19028fc973c95da4853ae21cdf36d5db5b1697c342916bf8cd73e6a9
6
+ metadata.gz: a250d0a6f1cf3346c8865962e9ace18989db39e2362042e6c3da2ce14e936d6cdf3512c3c4c5d44e36d1e7e00945215d84c1e0ae58362351767d6783976dc6f7
7
+ data.tar.gz: 60b3a234c5d036884a7f14e03d551c4b31e3509b38d422d6f6ff3526e8319502f351823a6f2a5c7b1bd09220ac6813b435f9bf0e65f3f66eb04b71051530cb9d
data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED
@@ -57,7 +57,7 @@ const CardBackground = (props) => {
57
57
  background="product_1_background"
58
58
  marginBottom="sm"
59
59
  {...props}
60
- >
60
+ >
61
61
  <Body
62
62
  dark
63
63
  text="Product 1 Background"
@@ -69,12 +69,11 @@ const CardBackground = (props) => {
69
69
  <Card
70
70
  background="product_7_highlight"
71
71
  marginBottom="sm"
72
- {...props}
73
- >
72
+ {...props} >
74
73
  <Body
75
74
  dark
76
- text="Product 7 Highlight"
77
- />
75
+ text="Product 7 Highlight"
76
+ />
78
77
  </Card>
79
78
 
80
79
 
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED
@@ -49,18 +49,15 @@ const DialogFullHeight = () => {
49
49
  <Flex wrap>
50
50
  <Button id="sm"
51
51
  marginRight="md"
52
- onClick={toggleHeaderSeparatorDialog}
53
- >
52
+ onClick={toggleHeaderSeparatorDialog}>
54
53
  {"Small Dialog"}
55
54
  </Button>
56
55
  <Button marginRight="md"
57
- onClick={toggleFooterSeparatorDialog}
58
- >
56
+ onClick={toggleFooterSeparatorDialog}>
59
57
  {"Medium Dialog"}
60
58
  </Button>
61
59
  <Button marginRight="md"
62
- onClick={toggleBothSeparatorsDialog}
63
- >
60
+ onClick={toggleBothSeparatorsDialog}>
64
61
  {"Large Dialog"}
65
62
  </Button>
66
63
  </Flex>
@@ -92,8 +89,7 @@ const DialogFullHeight = () => {
92
89
  <Dialog.Footer>
93
90
  <Button onClick={toggle}>{"Send My Issue"}</Button>
94
91
  <Button onClick={toggle}
95
- variant="link"
96
- >
92
+ variant="link">
97
93
  {"Back"}
98
94
  </Button>
99
95
  </Dialog.Footer>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED
@@ -48,18 +48,15 @@ const DialogFullHeightPlacement = () => {
48
48
  <Flex wrap>
49
49
  <Button id="sm"
50
50
  marginRight="md"
51
- onClick={toggleHeaderSeparatorDialog}
52
- >
51
+ onClick={toggleHeaderSeparatorDialog}>
53
52
  {"Left Dialog"}
54
53
  </Button>
55
54
  <Button marginRight="xl"
56
- onClick={toggleFooterSeparatorDialog}
57
- >
55
+ onClick={toggleFooterSeparatorDialog}>
58
56
  {"Center Dialog"}
59
57
  </Button>
60
58
  <Button marginRight="xl"
61
- onClick={toggleBothSeparatorsDialog}
62
- >
59
+ onClick={toggleBothSeparatorsDialog}>
63
60
  {"Right Dialog"}
64
61
  </Button>
65
62
  </Flex>
@@ -91,8 +88,7 @@ const DialogFullHeightPlacement = () => {
91
88
  <Dialog.Footer>
92
89
  <Button onClick={toggle}>{"Send My Issue"}</Button>
93
90
  <Button onClick={toggle}
94
- variant="link"
95
- >
91
+ variant="link">
96
92
  {"Back"}
97
93
  </Button>
98
94
  </Dialog.Footer>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx CHANGED
@@ -16,12 +16,10 @@ const DialogScrollable = () => {
16
16
  return (
17
17
  <>
18
18
  <Button marginRight="md"
19
- onClick={toggleDialog1}
20
- >{'Open Dialog'}
19
+ onClick={toggleDialog1}>{'Open Dialog'}
21
20
  </Button>
22
21
  <Button marginRight="md"
23
- onClick={toggleDialog2}
24
- >{'Open Full Height Dialog'}
22
+ onClick={toggleDialog2}>{'Open Full Height Dialog'}
25
23
  </Button>
26
24
  <Dialog
27
25
  cancelButton="Cancel"
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx CHANGED
@@ -84,7 +84,7 @@ const DialogStatus = () => {
84
84
  <Flex
85
85
  rowGap="xs"
86
86
  wrap
87
- >
87
+ >
88
88
  <Button
89
89
  marginRight="md"
90
90
  onClick={toggleDefaultAlert}
data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx CHANGED
@@ -74,7 +74,7 @@ const GaugeComplex = (props) => (
74
74
  <Body
75
75
  color="light"
76
76
  text="% Abandoned"
77
- />
77
+ />
78
78
  <Flex wrap>
79
79
  <FlexItem
80
80
  fixedSize="150px"
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb CHANGED
@@ -1,62 +1,62 @@
1
1
  <% treeData = [{
2
2
  label: "Power Home Remodeling",
3
3
  value: "Power Home Remodeling",
4
- id: "powerhome1",
4
+ id: "100",
5
5
  expanded: true,
6
6
  children: [
7
7
  {
8
8
  label: "People",
9
9
  value: "People",
10
- id: "people1",
10
+ id: "101",
11
11
  children: [
12
12
  {
13
13
  label: "Talent Acquisition",
14
14
  value: "Talent Acquisition",
15
- id: "talent1",
15
+ id: "102",
16
16
  },
17
17
  {
18
18
  label: "Business Affairs",
19
19
  value: "Business Affairs",
20
- id: "business1",
20
+ id: "103",
21
21
  children: [
22
22
  {
23
23
  label: "Initiatives",
24
24
  value: "Initiatives",
25
- id: "initiative1",
25
+ id: "104",
26
26
  },
27
27
  {
28
28
  label: "Learning & Development",
29
29
  value: "Learning & Development",
30
- id: "development1",
30
+ id: "105",
31
31
  },
32
32
  ],
33
33
  },
34
34
  {
35
35
  label: "People Experience",
36
36
  value: "People Experience",
37
- id: "experience1",
37
+ id: "106",
38
38
  },
39
39
  ],
40
40
  },
41
41
  {
42
42
  label: "Contact Center",
43
43
  value: "Contact Center",
44
- id: "contact1",
44
+ id: "107",
45
45
  children: [
46
46
  {
47
47
  label: "Appointment Management",
48
48
  value: "Appointment Management",
49
- id: "appointment1",
49
+ id: "108",
50
50
  },
51
51
  {
52
52
  label: "Customer Service",
53
53
  value: "Customer Service",
54
- id: "customer1",
54
+ id: "109",
55
55
  },
56
56
  {
57
57
  label: "Energy",
58
58
  value: "Energy",
59
- id: "energy1",
59
+ id: "110",
60
60
  },
61
61
  ],
62
62
  },
@@ -65,14 +65,8 @@
65
65
 
66
66
 
67
67
 
68
- <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
69
68
  <%= pb_rails("multi_level_select", props: {
70
- id: "default-multi-level-select-test",
69
+ id: "multi-level-select-default-rails",
71
70
  name: "my_array",
72
71
  tree_data: treeData
73
72
  }) %>
74
- <%= form.actions do |action| %>
75
- <%= action.submit %>
76
- <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
77
- <% end %>
78
- <% end %>
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx CHANGED
@@ -75,11 +75,10 @@ const MultiLevelSelectDefault = (props) => {
75
75
  id='multiselect-default'
76
76
  onSelect={(selectedNodes) =>
77
77
  console.log(
78
- "Selected Items (default... with ids only)",
78
+ "Selected Items",
79
79
  selectedNodes
80
80
  )
81
81
  }
82
- returnAllSelected
83
82
  treeData={treeData}
84
83
  {...props}
85
84
  />
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md CHANGED
@@ -1,5 +1,5 @@
1
1
  The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. `treeData` is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.
2
2
 
3
- For the React version of the kit, the `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
3
+ For the React version of the kit, the `onSelect` prop returns an array of objects. This array contains all checked items irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
4
4
 
5
- By default, the return will be an array of Id's. If you want to return the entire object, you can pass `returnCompleteData` as true. This will return an array of objects.
5
+ For the Rails version of the kit, there is no onselect. The form submits as a array of strings, following the typical rails pattern of utilizing hidden inputs. The strings are the values of the selected items' ids. For example, ["103", "106", "107"].
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb CHANGED
@@ -1,62 +1,62 @@
1
1
  <% treeData = [{
2
2
  label: "Power Home Remodeling",
3
3
  value: "Power Home Remodeling",
4
- id: "powerhome1",
4
+ id: "100",
5
5
  expanded: true,
6
6
  children: [
7
7
  {
8
8
  label: "People",
9
9
  value: "People",
10
- id: "people1",
10
+ id: "101",
11
11
  children: [
12
12
  {
13
13
  label: "Talent Acquisition",
14
14
  value: "Talent Acquisition",
15
- id: "talent1",
15
+ id: "102",
16
16
  },
17
17
  {
18
18
  label: "Business Affairs",
19
19
  value: "Business Affairs",
20
- id: "business1",
20
+ id: "103",
21
21
  children: [
22
22
  {
23
23
  label: "Initiatives",
24
24
  value: "Initiatives",
25
- id: "initiative1",
25
+ id: "104",
26
26
  },
27
27
  {
28
28
  label: "Learning & Development",
29
29
  value: "Learning & Development",
30
- id: "development1",
30
+ id: "105",
31
31
  },
32
32
  ],
33
33
  },
34
34
  {
35
35
  label: "People Experience",
36
36
  value: "People Experience",
37
- id: "experience1",
37
+ id: "106",
38
38
  },
39
39
  ],
40
40
  },
41
41
  {
42
42
  label: "Contact Center",
43
43
  value: "Contact Center",
44
- id: "contact1",
44
+ id: "107",
45
45
  children: [
46
46
  {
47
47
  label: "Appointment Management",
48
48
  value: "Appointment Management",
49
- id: "appointment1",
49
+ id: "108",
50
50
  },
51
51
  {
52
52
  label: "Customer Service",
53
53
  value: "Customer Service",
54
- id: "customer1",
54
+ id: "109",
55
55
  },
56
56
  {
57
57
  label: "Energy",
58
58
  value: "Energy",
59
- id: "energy1",
59
+ id: "110",
60
60
  },
61
61
  ],
62
62
  },
@@ -65,15 +65,11 @@
65
65
 
66
66
 
67
67
 
68
- <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
69
- <%= pb_rails("multi_level_select", props: {
70
- id: "default-multi-level-select-test-return-all-selected",
71
- name: "q[user_title_org_level_id_in]",
72
- tree_data: treeData,
73
- return_all_selected: true
74
- }) %>
75
- <%= form.actions do |action| %>
76
- <%= action.submit %>
77
- <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
78
- <% end %>
79
- <% end %>
68
+
69
+ <%= pb_rails("multi_level_select", props: {
70
+ id: "multi-level-select-return-all-selected-rails",
71
+ name: "my_data_array",
72
+ tree_data: treeData,
73
+ return_all_selected: true
74
+ }) %>
75
+
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx CHANGED
@@ -72,7 +72,7 @@ const MultiLevelSelectReturnAllSelected = (props) => {
72
72
  return (
73
73
  <div>
74
74
  <MultiLevelSelect
75
- id="multiselect-parent-persistence"
75
+ id="multi-level-select-return-all-selected"
76
76
  onSelect={(selectedNodes) =>
77
77
  console.log("Selected Items with Return All Selected Data", selectedNodes)
78
78
  }
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb CHANGED
@@ -65,7 +65,7 @@
65
65
  ],
66
66
  }] %>
67
67
 
68
- <%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData, return_all_selected: true } %>
68
+ <%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData, return_all_selected: true, margin_bottom: "sm" } %>
69
69
  <%= form.actions do |action| %>
70
70
  <%= action.button props: { type: "submit", text: "Submit", variant: "primary", margin_top: "lg" } %>
71
71
  <% end %>
data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml CHANGED
@@ -2,11 +2,9 @@ examples:
2
2
  rails:
3
3
  - multi_level_select_default: Default
4
4
  - multi_level_select_return_all_selected: Return All Selected
5
- - multi_level_select_return_complete_data: Return Complete Data
6
5
  - multi_level_select_with_form: With Form
7
6
 
8
7
  react:
9
8
  - multi_level_select_default: Default
10
9
  - multi_level_select_return_all_selected: Return All Selected
11
- - multi_level_select_return_complete_data: Return Complete Data
12
10
 
data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js CHANGED
@@ -1,3 +1,2 @@
1
1
  export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
2
- export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
3
- export { default as MultiLevelSelectReturnCompleteData } from './_multi_level_select_return_complete_data.jsx'
2
+ export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx CHANGED
@@ -91,8 +91,7 @@ const PassphraseCommon = (props) => {
91
91
  <div>
92
92
  <Body
93
93
  marginBottom='md'
94
- text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(', ')}`}
95
- />
94
+ text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(', ')}`} />
96
95
  <Passphrase
97
96
  onChange={handleChange}
98
97
  value={input}
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx CHANGED
@@ -5,8 +5,7 @@ const PhoneNumberInputDefault = (props) => (
5
5
  <>
6
6
  <PhoneNumberInput
7
7
  id='default'
8
- {...props}
9
- />
8
+ {...props} />
10
9
  </>
11
10
  )
12
11