playbook_ui_docs 14.4.0.pre.rc.15 → 14.5.0.pre.alpha.javascriptassets3926

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) 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_multiple_users_stacked/docs/_multiple_users_stacked_bubble.html.erb +73 -0
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.jsx +86 -0
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +12 -1
  24. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +3 -1
  25. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +14 -13
  26. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +4 -4
  27. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +2 -0
  28. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +62 -0
  29. data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
  30. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  31. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +88 -0
  32. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +60 -0
  33. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  34. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  35. data/dist/playbook-doc.js +1 -1
  36. metadata +15 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2d2c2e8a8e26e2b36cd660be9ec0cc60b7ba9fd3840d57e854fe1bfd3866ca46
4
- data.tar.gz: b4efb89abbab308c993a5bbc4664716fc454ae85502de8c5a24b141ed50b79d6
3
+ metadata.gz: 9a16ac31576c232662892e48ef8156468fc73807bcac1989c9049d81da3fb3d1
4
+ data.tar.gz: 1a4305d4ea9a3aec3a1681edbb7d4ad55d60f2c06502709078ae5026c723af11
5
5
  SHA512:
6
- metadata.gz: bbb0ac7dcbc810a81eee4f9dfb9a8447c9e53ff7937be9a96da3191775731487139d790b51cea14bd2c84d685747dfbc7c6f2aef2fbb278c60ed9823b931914e
7
- data.tar.gz: 9b692f47a01cba0748b0b5385cf876f1c0beef3897a23b3f6dff66c2f0b06a47aa3b1a6a39e71a2746ce4c62e7b05d457cae1c608c8055c681b0f911bf7d1b4e
6
+ metadata.gz: 3b899d247b274b087938d42a9b90802991e8fdbd643cfbd3d4c1b66e2bbb6cb2126f4361f988f503b1dd397f6da84697a52d6d76eac2120fa666d8278f20b0a9
7
+ data.tar.gz: dda651d1addc11504d3d55e92e8fc11547bf9f7bb51f473bab807b05b9192d326f3ff9dc88524ba79e284e662bf39855417983c0efbda1ab8aa856736251826b
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_multiple_users_stacked/docs/_multiple_users_stacked_bubble.html.erb ADDED
@@ -0,0 +1,73 @@
1
+ <%= pb_rails("multiple_users_stacked", props: {
2
+ variant: "bubble",
3
+ users: [
4
+ {
5
+ name: "Patrick Welch",
6
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
7
+ }
8
+ ]
9
+ }) %>
10
+
11
+ <br/><br/>
12
+
13
+ <%= pb_rails("multiple_users_stacked", props: {
14
+ variant: "bubble",
15
+ users: [
16
+ {
17
+ name: "Patrick Welch",
18
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
19
+ },
20
+ {
21
+ name: "Lucille Sanchez",
22
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
23
+ }
24
+ ]
25
+ }) %>
26
+
27
+ <br/><br/>
28
+
29
+ <%= pb_rails("multiple_users_stacked", props: {
30
+ variant: "bubble",
31
+ users: [
32
+ {
33
+ name: "Patrick Welch",
34
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
35
+ },
36
+ {
37
+ name: "Lucille Sanchez",
38
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
39
+ },
40
+ {
41
+ name: "Beverly Reyes",
42
+ image_url: "https://randomuser.me/api/portraits/women/74.jpg",
43
+ },
44
+ ]
45
+ }) %>
46
+
47
+ <br/><br/>
48
+
49
+ <%= pb_rails("multiple_users_stacked", props: {
50
+ variant: "bubble",
51
+ users: [
52
+ {
53
+ name: "Patrick Welch",
54
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
55
+ },
56
+ {
57
+ name: "Lucille Sanchez",
58
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
59
+ },
60
+ {
61
+ name: "Beverly Reyes",
62
+ image_url: "https://randomuser.me/api/portraits/women/74.jpg",
63
+ },
64
+ {
65
+ name: "Keith Craig",
66
+ image_url: "https://randomuser.me/api/portraits/men/40.jpg",
67
+ },
68
+ {
69
+ name: "Alicia Cooper",
70
+ image_url: "https://randomuser.me/api/portraits/women/46.jpg",
71
+ }
72
+ ]
73
+ }) %>