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

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