playbook_ui 14.4.0.pre.alpha.dependabotnpmandyarntiptapextensionparagraph2723830 → 14.4.0.pre.alpha.javascriptassets3924

Sign up to get free protection for your applications and to get access to all the features.
Files changed (89) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +23 -4
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
  5. data/app/pb_kits/playbook/pb_button/_button.tsx +6 -2
  6. data/app/pb_kits/playbook/pb_contact/_contact.tsx +17 -5
  7. data/app/pb_kits/playbook/pb_contact/contact.html.erb +14 -6
  8. data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
  9. data/app/pb_kits/playbook/pb_contact/contact.test.js +1 -1
  10. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +2 -6
  11. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +2 -7
  12. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -3
  13. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -0
  15. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +6 -3
  16. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +1 -1
  17. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +6 -2
  18. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +2 -0
  19. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  20. data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx +25 -0
  21. data/app/pb_kits/playbook/pb_drawer/_drawer.scss +465 -0
  22. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +195 -0
  23. data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx +3 -0
  24. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +117 -0
  25. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +43 -0
  26. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +1 -0
  27. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +63 -0
  28. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +55 -0
  29. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +113 -0
  30. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +12 -0
  31. data/app/pb_kits/playbook/pb_drawer/docs/index.js +5 -0
  32. data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +12 -0
  33. data/app/pb_kits/playbook/pb_drawer/drawer.rb +8 -0
  34. data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +77 -0
  35. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +10 -2
  36. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +5 -1
  37. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb +5 -1
  38. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +5 -1
  39. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +5 -1
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +5 -1
  41. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +5 -1
  42. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +5 -1
  43. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -1
  44. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +15 -4
  45. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +12 -1
  46. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +3 -1
  47. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +10 -2
  48. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +14 -13
  49. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +4 -4
  50. data/app/pb_kits/playbook/pb_radio/_radio.tsx +92 -33
  51. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +2 -0
  52. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +62 -0
  53. data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
  54. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  55. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +12 -5
  56. data/app/pb_kits/playbook/pb_select/_select.tsx +5 -2
  57. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
  58. data/app/pb_kits/playbook/pb_select/select.rb +4 -0
  59. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
  60. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +17 -13
  61. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -1
  62. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +14 -0
  63. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -0
  64. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +6 -5
  65. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +88 -0
  66. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +60 -0
  67. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  68. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  69. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  70. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +6 -1
  71. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +136 -13
  72. data/app/pb_kits/playbook/utilities/icons/angle-down.svg +3 -0
  73. data/app/pb_kits/playbook/utilities/icons/envelope.svg +3 -0
  74. data/dist/chunks/_typeahead-BYw0HEgO.js +22 -0
  75. data/dist/chunks/_weekday_stacked-DumiyWjh.js +45 -0
  76. data/dist/chunks/lib-CEpcaI8y.js +29 -0
  77. data/dist/chunks/{pb_form_validation-zV9OpdSt.js → pb_form_validation-D9zkwt2b.js} +1 -1
  78. data/dist/chunks/vendor.js +1 -1
  79. data/dist/menu.yml +3 -1
  80. data/dist/playbook-doc.js +1 -1
  81. data/dist/playbook-rails-react-bindings.js +1 -1
  82. data/dist/playbook-rails.js +1 -1
  83. data/dist/playbook.css +1 -1
  84. data/lib/playbook/pagination_renderer.rb +10 -2
  85. data/lib/playbook/version.rb +1 -1
  86. metadata +26 -6
  87. data/dist/chunks/_typeahead-B2zRxReA.js +0 -22
  88. data/dist/chunks/_weekday_stacked-Co95UEiW.js +0 -45
  89. data/dist/chunks/lib-D2U4I1U6.js +0 -16
@@ -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;
@@ -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;
@@ -0,0 +1 @@
1
+ <%= pb_rails("drawer") %>
@@ -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;
@@ -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;
@@ -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;
@@ -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
@@ -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'
@@ -0,0 +1,12 @@
1
+ <!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
2
+ <!-- If using nonstandard params please un-comment out and replace with your custom params. -->
3
+ <%= pb_content_tag(
4
+ # :div,
5
+ # aria: object.aria,
6
+ # class: object.classname,
7
+ # data: object.data,
8
+ # id: object.id,
9
+ # **combined_html_options
10
+ ) do %>
11
+ <span>DRAWER CONTENT</span>
12
+ <% end %>
@@ -0,0 +1,8 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbDrawer
5
+ class Drawer < ::Playbook::KitBase
6
+ end
7
+ end
8
+ end
@@ -0,0 +1,77 @@
1
+ import React, { useState } from 'react';
2
+ import { render, cleanup, fireEvent, screen } from '../utilities/test-utils';
3
+ import { Drawer, Button } from 'playbook-ui';
4
+
5
+ const size = 'sm';
6
+
7
+ function DrawerTest({ props }) {
8
+ const [isOpen, setIsOpen] = useState(false);
9
+ const close = () => setIsOpen(false);
10
+ const open = () => setIsOpen(true);
11
+
12
+ return (
13
+ <>
14
+ <Button onClick={open}>{'Open Drawer'}</Button>
15
+ <Drawer
16
+ className="wrapper"
17
+ onClose={close}
18
+ opened={isOpen}
19
+ placement="left"
20
+ portalClassName="portal"
21
+ size={size}
22
+ {...props}
23
+ >
24
+ {props && props.children}
25
+ </Drawer>
26
+ </>
27
+ );
28
+ }
29
+
30
+ afterEach(cleanup);
31
+
32
+ test('renders with the right border class when border prop is right', async () => {
33
+ render(<DrawerTest props={{ border: 'right' }} />);
34
+
35
+ fireEvent.click(screen.getByText('Open Drawer'));
36
+
37
+ const drawer = await screen.findByRole('dialog');
38
+ expect(drawer).toHaveClass('drawer_border_right');
39
+ });
40
+
41
+ test('renders with the left border class when border prop is left', async () => {
42
+ render(<DrawerTest props={{ border: 'left' }} />);
43
+
44
+ fireEvent.click(screen.getByText('Open Drawer'));
45
+
46
+ const drawer = await screen.findByRole('dialog');
47
+ expect(drawer).toHaveClass('drawer_border_left');
48
+ });
49
+
50
+ test('renders with the full border class when border prop is full', async () => {
51
+ render(<DrawerTest props={{ border: 'full' }} />);
52
+
53
+ fireEvent.click(screen.getByText('Open Drawer'));
54
+
55
+ const drawer = await screen.findByRole('dialog');
56
+ expect(drawer).toHaveClass('drawer_border_full');
57
+ });
58
+
59
+ test('does not have a border class when border prop is none', async () => {
60
+ render(<DrawerTest props={{ border: 'none' }} />);
61
+
62
+ fireEvent.click(screen.getByText('Open Drawer'));
63
+
64
+ const drawer = await screen.findByRole('dialog');
65
+ expect(drawer).not.toHaveClass('drawer_border_right');
66
+ expect(drawer).not.toHaveClass('drawer_border_left');
67
+ expect(drawer).not.toHaveClass('drawer_border_full');
68
+ });
69
+
70
+ test('renders the correct size class for a large drawer', async () => {
71
+ render(<DrawerTest props={{ size: 'lg' }} />);
72
+
73
+ fireEvent.click(screen.getByText('Open Drawer'));
74
+
75
+ const drawer = await screen.findByRole('dialog');
76
+ expect(drawer).toHaveClass('pb_drawer pb_drawer_lg_left');
77
+ });
@@ -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 %>
@@ -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 %>
@@ -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 %>
@@ -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 %>
@@ -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 %>
@@ -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 %>
@@ -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 %>
@@ -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 %>
@@ -2,6 +2,7 @@ import React from "react";
2
2
  import Button from "../pb_button/_button";
3
3
  import Icon from "../pb_icon/_icon";
4
4
  import Flex from "../pb_flex/_flex";
5
+ import { getAllIcons } from "../utilities/icons/allicons"
5
6
 
6
7
  type MapControlTypes = {
7
8
  zoomBtns?: boolean,
@@ -12,6 +13,8 @@ type MapControlTypes = {
12
13
  children?: React.ReactNode | React.ReactNode[]
13
14
  }
14
15
 
16
+ const eyeIcon = getAllIcons()["eye"]
17
+
15
18
  const MapControls = ({
16
19
  zoomBtns,
17
20
  zoomInClick,
@@ -42,7 +45,10 @@ const MapControls = ({
42
45
  <Button className="map-flyto-button"
43
46
  onClick={flyToClick}
44
47
  >
45
- <Icon icon="eye" />
48
+ <Icon
49
+ className="svg-inline--fa"
50
+ customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
51
+ />
46
52
  </Button>
47
53
  ) : null}
48
54
  </>