playbook_ui_docs 14.4.0.pre.rc.16 → 14.5.0.pre.alpha.PBNTR374multilevelselectPOC3946

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +1 -1
  3. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +117 -0
  4. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +43 -0
  5. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +1 -0
  6. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +63 -0
  7. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +55 -0
  8. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +113 -0
  9. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +12 -0
  10. data/app/pb_kits/playbook/pb_drawer/docs/index.js +5 -0
  11. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +10 -2
  12. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +5 -1
  13. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb +5 -1
  14. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +5 -1
  15. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +5 -1
  16. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +5 -1
  17. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +5 -1
  18. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +5 -1
  19. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +107 -0
  21. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +108 -0
  22. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -0
  23. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
  24. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +12 -1
  25. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +3 -1
  26. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +14 -13
  27. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +4 -4
  28. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +2 -0
  29. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +62 -0
  30. data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
  31. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  32. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +88 -0
  33. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +60 -0
  34. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  35. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  36. data/dist/playbook-doc.js +1 -1
  37. metadata +15 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6e3f91e117875db899b6462992d51c4dd25253aa31334f20c103916a2f613bd7
4
- data.tar.gz: 8c1d353d202668c7e6bee8a768ee3ab12b97d2d649b845cd8dfea69c773d057c
3
+ metadata.gz: 744caf1b9e3a19f1b4fa5ea94f17905c749f1455dadc37fa41454fb084f7b4f6
4
+ data.tar.gz: a3abe2957897cdf4d6ebc089d97afc603b2147a068839e2ba9ce00b8a1d32d67
5
5
  SHA512:
6
- metadata.gz: e439008d17a257bd9d934722ad010d648ec43547e1fcdb3c3e65977f334bc31b0b314b6f4604eb1c54b5fa2ab6ae019578b184f1f2398760145fe41574422bdb
7
- data.tar.gz: 39ab8b54014ad6979cbbf81bf6919b099eb0fae7b1d37b0fe9ef2538daa9a5c07c6684eb3c49a0ba34b90bff354fbb54f65102ba1f11cb5bc97d6993431b2f71
6
+ metadata.gz: aa0c95ed3dc8dc374de66838e64434af84f37c1eebcb47c1370d787645311ce1196651ea08c078a3c087fc3cf528e723fb6332aa8d2e19297cf08c48e7ad9202
7
+ data.tar.gz: f5f02eb30827d9d97b0f5199bd8b2a43df8f2c9234c86fadbebc5279cd0285649d970a0d97fca6841213ed6e7b5861ebbc8c34723531a94fffc4daf59d6ebdd1
data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb CHANGED
@@ -14,4 +14,4 @@
14
14
  }
15
15
  fpInline.config.onChange.push(showAngleDownHandler)
16
16
  })
17
- <% end %>
17
+ <% end %>
data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx ADDED
@@ -0,0 +1,117 @@
1
+ import React, { useState } from "react";
2
+ import { Button, Drawer, Flex } from "playbook-ui";
3
+
4
+ const DrawerBorders = () => {
5
+ // Individual state variables for each drawer size
6
+ const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
7
+ const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
8
+ const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
9
+ const [openedBDefaultDrawer, setOpenedBDefaultDrawer] = useState(false);
10
+ const [openedBRoundedDrawer, setOpenedBRoundedDrawer] = useState(false);
11
+
12
+ // Toggle functions for each drawer
13
+ const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
14
+ const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
15
+ const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
16
+ const toggleBDefaultDrawer = () => setOpenedBDefaultDrawer(!openedBDefaultDrawer);
17
+ const toggleBRoundedDrawer = () => setOpenedBRoundedDrawer(!openedBRoundedDrawer);
18
+
19
+ return (
20
+ <>
21
+ <Flex padding="md"
22
+ wrap
23
+ >
24
+ <Button marginRight="md"
25
+ onClick={toggleBRightDrawer}
26
+ >
27
+ Drawer with border right
28
+ </Button>
29
+ <Button marginRight="md"
30
+ onClick={toggleBLeftDrawer}
31
+ >
32
+ Drawer with border left
33
+ </Button>
34
+ <Button marginRight="md"
35
+ onClick={toggleBFullDrawer}
36
+ >
37
+ Drawer with border full
38
+ </Button>
39
+ <Button marginRight="md"
40
+ onClick={toggleBDefaultDrawer}
41
+ >
42
+ Default Drawer
43
+ </Button>
44
+ <Button marginRight="md"
45
+ onClick={toggleBRoundedDrawer}
46
+ >
47
+ Rounded Drawer
48
+ </Button>
49
+ </Flex>
50
+
51
+ {/* Drawers for each size */}
52
+ <Drawer
53
+ behavior="float"
54
+ border="right"
55
+ fullHeight
56
+ onClose={toggleBRightDrawer}
57
+ opened={openedBRightDrawer}
58
+ overlay={false}
59
+ placement="left"
60
+ size="lg"
61
+ >
62
+ This is a Drawer with border right
63
+ </Drawer>
64
+ <Drawer
65
+ behavior="float"
66
+ border="left"
67
+ fullHeight
68
+ onClose={toggleBLeftDrawer}
69
+ opened={openedBLeftDrawer}
70
+ overlay={false}
71
+ placement="right"
72
+ size="lg"
73
+ >
74
+ This is a Drawer with border left
75
+ </Drawer>
76
+ <Drawer
77
+ behavior="float"
78
+ border="full"
79
+ fullHeight
80
+ onClose={toggleBFullDrawer}
81
+ opened={openedBFullDrawer}
82
+ overlay={false}
83
+ placement="right"
84
+ size="lg"
85
+ >
86
+ This is a Drawer with border full
87
+ </Drawer>
88
+ <Drawer
89
+ behavior="float"
90
+ fullHeight
91
+ onClose={toggleBDefaultDrawer}
92
+ opened={openedBDefaultDrawer}
93
+ overlay={false}
94
+ placement="right"
95
+ size="lg"
96
+ >
97
+ This is a Default Drawer
98
+ </Drawer>
99
+ <Drawer
100
+ behavior="float"
101
+ borderRadius="rounded"
102
+ fullHeight
103
+ onClose={toggleBRoundedDrawer}
104
+ opened={openedBRoundedDrawer}
105
+ overlay={false}
106
+ placement="right"
107
+ size="lg"
108
+ >
109
+ <div style={{ paddingTop: '100px', paddingLeft: '12px' }}>
110
+ This is a Rounded Drawer
111
+ </div>
112
+ </Drawer>
113
+ </>
114
+ );
115
+ };
116
+
117
+ export default DrawerBorders;
data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx ADDED
@@ -0,0 +1,43 @@
1
+ import React, { useState } from "react";
2
+ import { Button, Drawer, Flex } from "playbook-ui";
3
+
4
+ const useDrawer = (visible = false) => {
5
+ const [opened, setOpened] = useState(visible);
6
+ const toggle = () => setOpened(!opened);
7
+
8
+ return [opened, toggle];
9
+ };
10
+
11
+ const DrawerBreakpoints = () => {
12
+ const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
13
+
14
+ return (
15
+ <>
16
+ <Flex wrap>
17
+ <Button
18
+ id="sm"
19
+ marginRight="md"
20
+ onClick={toggleSmallDrawer}
21
+ >
22
+ {"Will open at small breakpoint"}
23
+ </Button>
24
+ </Flex>
25
+ <Flex>
26
+ <Drawer
27
+ behavior={"push"}
28
+ breakpoint="sm"
29
+ fullHeight
30
+ onClose={toggleSmallDrawer}
31
+ opened={smallDrawerOpened}
32
+ overlay={false}
33
+ placement={"right"}
34
+ size={"lg"}
35
+ >
36
+ Open because small breakpoint
37
+ </Drawer>
38
+ </Flex>
39
+ </>
40
+ );
41
+ };
42
+
43
+ export default DrawerBreakpoints;
data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb ADDED
@@ -0,0 +1 @@
1
+ <%= pb_rails("drawer") %>
data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx ADDED
@@ -0,0 +1,63 @@
1
+ import React, { useState } from "react";
2
+ import { Button, Drawer, Flex } from "playbook-ui";
3
+
4
+ const useDrawer = (visible = false) => {
5
+ const [opened, setOpened] = useState(visible);
6
+ const toggle = () => setOpened(!opened);
7
+
8
+ return [opened, toggle];
9
+ };
10
+
11
+ const DrawerDefault = () => {
12
+ const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
13
+ const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
14
+
15
+ return (
16
+ <>
17
+ <Flex wrap>
18
+ <Button
19
+ id="sm"
20
+ marginRight="md"
21
+ onClick={toggleHeaderSeparatorDrawer}
22
+ >
23
+ {"Left Drawer"}
24
+ </Button>
25
+ <Button
26
+ marginRight="xl"
27
+ onClick={toggleBothSeparatorsDrawer}
28
+ >
29
+ {"Right Drawer"}
30
+ </Button>
31
+ </Flex>
32
+ <Flex>
33
+ {/* Left Drawer */}
34
+ <Drawer
35
+ behavior={"push"}
36
+ fullHeight
37
+ onClose={toggleHeaderSeparatorDrawer}
38
+ opened={headerSeparatorDrawerOpened}
39
+ overlay
40
+ placement={"left"}
41
+ size={"lg"}
42
+ >
43
+ Test me (Left Drawer)
44
+ </Drawer>
45
+
46
+ {/* Right Drawer */}
47
+ <Drawer
48
+ behavior={"push"}
49
+ fullHeight
50
+ onClose={toggleBothSeparatorsDrawer}
51
+ opened={bothSeparatorsDrawerOpened}
52
+ overlay
53
+ placement={"right"}
54
+ size={"lg"}
55
+ >
56
+ Test me (Right Drawer)
57
+ </Drawer>
58
+ </Flex>
59
+ </>
60
+ );
61
+ };
62
+
63
+ export default DrawerDefault;
data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx ADDED
@@ -0,0 +1,55 @@
1
+ import React, { useState } from "react";
2
+ import { Button, Drawer, Flex } from "playbook-ui";
3
+
4
+ const DrawerSizes = () => {
5
+ // Individual state variables for each drawer size
6
+ const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false);
7
+ const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false);
8
+
9
+ // Toggle functions for each drawer
10
+ const toggleNoOverlayDrawer = () => setOpenedNoOverlayDrawer(!openedNoOverlayDrawer);
11
+ const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer);
12
+
13
+ return (
14
+ <>
15
+ <Flex wrap>
16
+ <Button marginRight="md"
17
+ onClick={toggleNoOverlayDrawer}
18
+ >
19
+ No Overlay Drawer
20
+ </Button>
21
+ <Button marginRight="md"
22
+ onClick={toggleOverlayDrawer}
23
+ >
24
+ Overlay Drawer
25
+ </Button>
26
+ </Flex>
27
+
28
+ {/* Drawers for each size */}
29
+ <Drawer
30
+ behavior="push"
31
+ fullHeight
32
+ onClose={toggleNoOverlayDrawer}
33
+ opened={openedNoOverlayDrawer}
34
+ overlay={false}
35
+ placement="right"
36
+ size="lg"
37
+ >
38
+ This is a Drawer with no overlay
39
+ </Drawer>
40
+ <Drawer
41
+ behavior="push"
42
+ fullHeight
43
+ onClose={toggleOverlayDrawer}
44
+ opened={openedOverlayDrawer}
45
+ overlay
46
+ placement="right"
47
+ size="lg"
48
+ >
49
+ This is a Drawer with an overlay
50
+ </Drawer>
51
+ </>
52
+ );
53
+ };
54
+
55
+ export default DrawerSizes;
data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx ADDED
@@ -0,0 +1,113 @@
1
+ import React, { useState } from "react";
2
+ import { Button, Drawer, Flex } from "playbook-ui";
3
+
4
+ const DrawerSizes = () => {
5
+ // Individual state variables for each drawer size
6
+ const [openedXsDrawer, setOpenedXsDrawer] = useState(false);
7
+ const [openedSmDrawer, setOpenedSmDrawer] = useState(false);
8
+ const [openedMdDrawer, setOpenedMdDrawer] = useState(false);
9
+ const [openedLgDrawer, setOpenedLgDrawer] = useState(false);
10
+ const [openedXlDrawer, setOpenedXlDrawer] = useState(false);
11
+
12
+ // Toggle functions for each drawer
13
+ const toggleXsDrawer = () => setOpenedXsDrawer(!openedXsDrawer);
14
+ const toggleSmDrawer = () => setOpenedSmDrawer(!openedSmDrawer);
15
+ const toggleMdDrawer = () => setOpenedMdDrawer(!openedMdDrawer);
16
+ const toggleLgDrawer = () => setOpenedLgDrawer(!openedLgDrawer);
17
+ const toggleXlDrawer = () => setOpenedXlDrawer(!openedXlDrawer);
18
+
19
+ return (
20
+ <>
21
+ <Flex wrap>
22
+ <Button marginRight="md"
23
+ onClick={toggleXsDrawer}
24
+ >
25
+ XS Drawer
26
+ </Button>
27
+ <Button marginRight="md"
28
+ onClick={toggleSmDrawer}
29
+ >
30
+ SM Drawer
31
+ </Button>
32
+ <Button marginRight="md"
33
+ onClick={toggleMdDrawer}
34
+ >
35
+ MD Drawer
36
+ </Button>
37
+ <Button marginRight="md"
38
+ onClick={toggleLgDrawer}
39
+ >
40
+ LG Drawer
41
+ </Button>
42
+ <Button marginRight="md"
43
+ onClick={toggleXlDrawer}
44
+ >
45
+ XL Drawer
46
+ </Button>
47
+ </Flex>
48
+
49
+ {/* Drawers for each size */}
50
+ <Drawer
51
+ behavior="push"
52
+ fullHeight
53
+ onClose={toggleXsDrawer}
54
+ opened={openedXsDrawer}
55
+ overlay
56
+ placement="right"
57
+ size="xs"
58
+ >
59
+ XS
60
+ </Drawer>
61
+
62
+ <Drawer
63
+ behavior="push"
64
+ fullHeight
65
+ onClose={toggleSmDrawer}
66
+ opened={openedSmDrawer}
67
+ overlay
68
+ placement="right"
69
+ size="sm"
70
+ >
71
+ This is an SM Drawer
72
+ </Drawer>
73
+
74
+ <Drawer
75
+ behavior="push"
76
+ fullHeight
77
+ onClose={toggleMdDrawer}
78
+ opened={openedMdDrawer}
79
+ overlay
80
+ placement="right"
81
+ size="md"
82
+ >
83
+ This is an MD Drawer
84
+ </Drawer>
85
+
86
+ <Drawer
87
+ behavior="push"
88
+ fullHeight
89
+ onClose={toggleLgDrawer}
90
+ opened={openedLgDrawer}
91
+ overlay
92
+ placement="right"
93
+ size="lg"
94
+ >
95
+ This is an LG Drawer
96
+ </Drawer>
97
+
98
+ <Drawer
99
+ behavior="push"
100
+ fullHeight
101
+ onClose={toggleXlDrawer}
102
+ opened={openedXlDrawer}
103
+ overlay
104
+ placement="right"
105
+ size="xl"
106
+ >
107
+ This is an XL Drawer
108
+ </Drawer>
109
+ </>
110
+ );
111
+ };
112
+
113
+ export default DrawerSizes;
data/app/pb_kits/playbook/pb_drawer/docs/example.yml ADDED
@@ -0,0 +1,12 @@
1
+ examples:
2
+
3
+ rails:
4
+ - drawer_default: Default
5
+
6
+
7
+ react:
8
+ - drawer_default: Default
9
+ - drawer_sizes: Sizes
10
+ - drawer_overlay: Overlay
11
+ - drawer_borders: Borders
12
+ - drawer_breakpoints: Open on Breakpoints
data/app/pb_kits/playbook/pb_drawer/docs/index.js ADDED
@@ -0,0 +1,5 @@
1
+ export { default as DrawerDefault } from './_drawer_default.jsx'
2
+ export { default as DrawerSizes } from './_drawer_sizes.jsx'
3
+ export { default as DrawerOverlay } from './_drawer_overlay.jsx'
4
+ export { default as DrawerBorders } from './_drawer_borders.jsx'
5
+ export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'
data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb CHANGED
@@ -30,7 +30,11 @@
30
30
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
31
31
 
32
32
  <%= form.actions do |action| %>
33
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
33
+ <%= action.submit props: {
34
+ text: "Apply",
35
+ data: {
36
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
37
+ },}%>
34
38
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
35
39
  <% end %>
36
40
  <% end %>
@@ -64,7 +68,11 @@
64
68
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
65
69
 
66
70
  <%= form.actions do |action| %>
67
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
71
+ <%= action.submit props: {
72
+ text: "Apply",
73
+ data: {
74
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
75
+ },}%>
68
76
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
69
77
  <% end %>
70
78
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb CHANGED
@@ -35,7 +35,11 @@
35
35
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
36
36
 
37
37
  <%= form.actions do |action| %>
38
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
38
+ <%= action.submit props: {
39
+ text: "Apply",
40
+ data: {
41
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
42
+ },}%>
39
43
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
40
44
  <% end %>
41
45
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb CHANGED
@@ -30,7 +30,11 @@
30
30
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
31
31
 
32
32
  <%= form.actions do |action| %>
33
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
33
+ <%= action.submit props: {
34
+ text: "Apply",
35
+ data: {
36
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
37
+ },}%>
34
38
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
35
39
  <% end %>
36
40
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb CHANGED
@@ -69,7 +69,11 @@
69
69
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
70
70
 
71
71
  <%= form.actions do |action| %>
72
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
72
+ <%= action.submit props: {
73
+ text: "Apply",
74
+ data: {
75
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
76
+ },}%>
73
77
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
74
78
  <% end %>
75
79
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb CHANGED
@@ -24,7 +24,11 @@
24
24
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
25
25
 
26
26
  <%= form.actions do |action| %>
27
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
27
+ <%= action.submit props: {
28
+ text: "Apply",
29
+ data: {
30
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
31
+ },}%>
28
32
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
29
33
  <% end %>
30
34
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb CHANGED
@@ -22,7 +22,11 @@
22
22
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
23
23
 
24
24
  <%= form.actions do |action| %>
25
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
25
+ <%= action.submit props: {
26
+ text: "Apply",
27
+ data: {
28
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
29
+ },}%>
26
30
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
27
31
  <% end %>
28
32
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb CHANGED
@@ -23,7 +23,11 @@
23
23
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
24
24
 
25
25
  <%= form.actions do |action| %>
26
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
26
+ <%= action.submit props: {
27
+ text: "Apply",
28
+ data: {
29
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
30
+ },}%>
27
31
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
28
32
  <% end %>
29
33
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb CHANGED
@@ -29,7 +29,11 @@
29
29
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
30
30
 
31
31
  <%= form.actions do |action| %>
32
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
32
+ <%= action.submit props: {
33
+ text: "Apply",
34
+ data: {
35
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
36
+ },}%>
33
37
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
34
38
  <% end %>
35
39
  <% end %>
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx CHANGED
@@ -87,4 +87,4 @@ const MultiLevelSelectDefault = (props) => {
87
87
  )
88
88
  };
89
89
 
90
- export default MultiLevelSelectDefault;
90
+ export default MultiLevelSelectDefault;
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx ADDED
@@ -0,0 +1,107 @@
1
+ import React from "react";
2
+ import MultiLevelSelect from "../_multi_level_select";
3
+ import Badge from "../../pb_badge/_badge";
4
+
5
+ const treeData = [
6
+ {
7
+ label: "Power Home Remodeling",
8
+ value: "Power Home Remodeling",
9
+ id: "powerhome1",
10
+ expanded: true,
11
+ children: [
12
+ {
13
+ label: "People",
14
+ value: "People",
15
+ id: "people1",
16
+ expanded: true,
17
+ status: "active",
18
+ children: [
19
+ {
20
+ label: "Talent Acquisition",
21
+ value: "Talent Acquisition",
22
+ id: "talent1",
23
+ },
24
+ {
25
+ label: "Business Affairs",
26
+ value: "Business Affairs",
27
+ id: "business1",
28
+ status: "active",
29
+ variant: "primary",
30
+
31
+ children: [
32
+ {
33
+ label: "Initiatives",
34
+ value: "Initiatives",
35
+ id: "initiative1",
36
+ },
37
+ {
38
+ label: "Learning & Development",
39
+ value: "Learning & Development",
40
+ id: "development1",
41
+ status: "Inactive",
42
+ },
43
+ ],
44
+ },
45
+ {
46
+ label: "People Experience",
47
+ value: "People Experience",
48
+ id: "experience1",
49
+ },
50
+ ],
51
+ },
52
+ {
53
+ label: "Contact Center",
54
+ value: "Contact Center",
55
+ id: "contact1",
56
+ status: "Inactive",
57
+ variant: "error",
58
+ children: [
59
+ {
60
+ label: "Appointment Management",
61
+ value: "Appointment Management",
62
+ id: "appointment1",
63
+ },
64
+ {
65
+ label: "Customer Service",
66
+ value: "Customer Service",
67
+ id: "customer1",
68
+ },
69
+ {
70
+ label: "Energy",
71
+ value: "Energy",
72
+ id: "energy1",
73
+ },
74
+ ],
75
+ },
76
+ ],
77
+ },
78
+ ];
79
+
80
+ const MultiLevelSelectWithChildren = (props) => {
81
+ return (
82
+ <div>
83
+ <MultiLevelSelect
84
+ id="multiselect-with-children"
85
+ onSelect={(selectedNodes) =>
86
+ console.log("Selected Items", selectedNodes)
87
+ }
88
+ treeData={treeData}
89
+ {...props}
90
+ >
91
+ <MultiLevelSelect.Options>
92
+ {(item) => (
93
+ <div>
94
+ <Badge
95
+ marginLeft="sm"
96
+ text={item.status}
97
+ variant={item.status === "active" ? "success" : "warning"}
98
+ />
99
+ </div>
100
+ )}
101
+ </MultiLevelSelect.Options>
102
+ </MultiLevelSelect>
103
+ </div>
104
+ );
105
+ };
106
+
107
+ export default MultiLevelSelectWithChildren;