playbook_ui 7.14.0.pre.alpha1 → 7.14.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (156) hide show
  1. checksums.yaml +4 -4
  2. data/app/helpers/playbook/pb_sample_helper.rb +1 -1
  3. data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +3 -0
  4. data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +12 -0
  5. data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -0
  6. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +0 -1
  8. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +10 -36
  9. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +20 -26
  10. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +0 -5
  11. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx +1 -0
  12. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +0 -2
  13. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +0 -1
  14. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.html.erb +1 -0
  15. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx +15 -0
  16. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  17. data/app/pb_kits/playbook/pb_date_range_stacked/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.html.erb +5 -0
  19. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx +26 -0
  20. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
  21. data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +2 -0
  22. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.html.erb +1 -0
  23. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx +14 -0
  24. data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +4 -0
  25. data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +1 -0
  26. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.html.erb +5 -0
  27. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx +28 -0
  28. data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +2 -0
  29. data/app/pb_kits/playbook/pb_date_year_stacked/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx +4 -9
  31. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss +7 -12
  32. data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +1 -4
  33. data/app/pb_kits/playbook/pb_distribution_bar/docs/example.yml +0 -2
  34. data/app/pb_kits/playbook/pb_distribution_bar/docs/index.js +0 -1
  35. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +1 -12
  36. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +0 -41
  37. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +37 -84
  38. data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +7 -18
  39. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb +21 -0
  40. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx +43 -0
  41. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +5 -0
  42. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +17 -0
  43. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +5 -0
  44. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +2 -0
  45. data/app/pb_kits/playbook/pb_flex/_flex.jsx +9 -25
  46. data/app/pb_kits/playbook/pb_flex/_flex.scss +7 -40
  47. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +2 -6
  48. data/app/pb_kits/playbook/pb_flex/_flex_item.scss +0 -10
  49. data/app/pb_kits/playbook/pb_flex/docs/_description.md +0 -6
  50. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.html.erb +15 -15
  51. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +15 -17
  52. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.md +1 -3
  53. data/app/pb_kits/playbook/pb_flex/docs/{_flex_justify.html.erb → _flex_horizontal.html.erb} +21 -19
  54. data/app/pb_kits/playbook/pb_flex/docs/{_flex_align.jsx → _flex_horizontal.jsx} +77 -71
  55. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb +8 -8
  56. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.md +1 -5
  57. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.html.erb +9 -9
  58. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +2 -2
  59. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +8 -23
  60. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +4 -4
  61. data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.html.erb +68 -0
  62. data/app/pb_kits/playbook/pb_flex/docs/{_flex_justify.jsx → _flex_vertical.jsx} +99 -41
  63. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +1 -1
  64. data/app/pb_kits/playbook/pb_flex/docs/example.yml +4 -9
  65. data/app/pb_kits/playbook/pb_flex/docs/index.js +2 -4
  66. data/app/pb_kits/playbook/pb_flex/flex.rb +12 -79
  67. data/app/pb_kits/playbook/pb_flex/flex_item.rb +1 -18
  68. data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +1 -7
  69. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb +3 -0
  70. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx +18 -0
  71. data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -1
  72. data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
  73. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.html.erb +42 -0
  74. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.jsx +66 -0
  75. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.html.erb +4 -0
  76. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.jsx +17 -0
  77. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.html.erb +29 -0
  78. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.jsx +38 -0
  79. data/app/pb_kits/playbook/pb_icon_circle/docs/example.yml +7 -0
  80. data/app/pb_kits/playbook/pb_icon_circle/docs/index.js +3 -0
  81. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.html.erb +23 -0
  82. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx +37 -0
  83. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.html.erb +21 -0
  84. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx +35 -0
  85. data/app/pb_kits/playbook/pb_icon_value/docs/example.yml +5 -0
  86. data/app/pb_kits/playbook/pb_icon_value/docs/index.js +2 -0
  87. data/app/pb_kits/playbook/pb_layout/_layout.scss +9 -9
  88. data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb +32 -0
  89. data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx +97 -0
  90. data/app/pb_kits/playbook/pb_layout/docs/example.yml +4 -0
  91. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
  92. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.html.erb +43 -0
  93. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx +105 -0
  94. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.html.erb +25 -0
  95. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx +51 -0
  96. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.html.erb +13 -0
  97. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx +54 -0
  98. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.html.erb +25 -0
  99. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx +57 -0
  100. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.html.erb +14 -0
  101. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx +54 -0
  102. data/app/pb_kits/playbook/pb_popover/docs/example.yml +13 -0
  103. data/app/pb_kits/playbook/pb_popover/docs/index.js +5 -0
  104. data/app/pb_kits/playbook/pb_select/_select.scss +4 -6
  105. data/app/pb_kits/playbook/pb_table/_table.jsx +0 -8
  106. data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb +4 -56
  107. data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx +3 -64
  108. data/app/pb_kits/playbook/pb_table/styles/_all.scss +0 -3
  109. data/app/pb_kits/playbook/pb_table/table.rb +1 -8
  110. data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb +4 -6
  111. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +16 -92
  112. data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +1 -12
  113. data/app/pb_kits/playbook/pb_timestamp/docs/_description.md +1 -1
  114. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +18 -26
  115. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +1 -21
  116. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +8 -40
  117. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +4 -12
  118. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb +54 -0
  119. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx +73 -0
  120. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +18 -26
  121. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb +177 -0
  122. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx +209 -0
  123. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb +21 -0
  124. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +28 -6
  125. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb +123 -0
  126. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx +146 -0
  127. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +0 -8
  128. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +0 -4
  129. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +1 -83
  130. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +4 -2
  131. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.html.erb +21 -0
  132. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.jsx +36 -0
  133. data/app/pb_kits/playbook/pb_user_badge/docs/index.js +1 -0
  134. data/lib/playbook/version.rb +1 -1
  135. metadata +57 -31
  136. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +0 -51
  137. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +0 -77
  138. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +0 -78
  139. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb +0 -4
  140. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx +0 -18
  141. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +0 -1
  142. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.html.erb +0 -101
  143. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.md +0 -7
  144. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb +0 -33
  145. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +0 -75
  146. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md +0 -9
  147. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +0 -49
  148. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +0 -11
  149. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +0 -113
  150. data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.md +0 -7
  151. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.md +0 -5
  152. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md +0 -7
  153. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.md +0 -5
  154. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +0 -135
  155. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +0 -135
  156. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +0 -135
@@ -0,0 +1,43 @@
1
+ <%= pb_rails("flex", props: {dark: true, classname: "flex-container", spacing: "between"}) do %>
2
+ <span>
3
+ <%= pb_rails("button", props: { dark: true, text: "Click Inside", variant: "primary", id: 'inside-popover-2' }) %>
4
+ <%= pb_rails("popover", props: {
5
+ close_on_click: "inside",
6
+ trigger_element_id: "inside-popover-2",
7
+ tooltip_id: "inside-tooltip-2",
8
+ position: 'bottom',
9
+ offset: true
10
+ }) do %>
11
+ Click on me!
12
+ <% end %>
13
+ </span>
14
+ <span>
15
+ <%= pb_rails("button", props: { text: "Click Outside", variant: "primary", id: 'outside-popover-2' }) %>
16
+ <%= pb_rails("popover", props: {
17
+ close_on_click: "outside",
18
+ trigger_element_id: "outside-popover-2",
19
+ tooltip_id: "outside-tooltip-1",
20
+ position: 'left',
21
+ offset: true
22
+ }) do %>
23
+ Click anywhere but me!
24
+ <% end %>
25
+ </span>
26
+ <span>
27
+ <%= pb_rails("button", props: {
28
+ dark: true,
29
+ text: "Click Anywhere",
30
+ variant: "primary",
31
+ id: 'any-popover-2'
32
+ }) %>
33
+ <%= pb_rails("popover", props: {
34
+ close_on_click: "any",
35
+ trigger_element_id: "any-popover-2",
36
+ tooltip_id: "any-tooltip-3",
37
+ position: 'top',
38
+ offset: true
39
+ }) do %>
40
+ Click anything!
41
+ <% end %>
42
+ </span>
43
+ <% end %>
@@ -0,0 +1,105 @@
1
+ import React, { useState } from 'react'
2
+ import {
3
+ Button,
4
+ Flex,
5
+ PbReactPopover,
6
+ } from '../..'
7
+
8
+ const PopoverCloseDark = (props) => {
9
+ const [showInsidePopover, setInsideShowPopover] = useState(false)
10
+ const [showOutsidePopover, setOutsideShowPopover] = useState(false)
11
+ const [showAnyPopover, setAnyShowPopover] = useState(false)
12
+
13
+ const handleInsideShouldClosePopover = (shouldClosePopover) => {
14
+ setInsideShowPopover(!shouldClosePopover)
15
+ }
16
+
17
+ const handleInsideTogglePopover = () => {
18
+ setInsideShowPopover(!showInsidePopover)
19
+ }
20
+
21
+ const handleOutsideShouldClosePopover = (shouldClosePopover) => {
22
+ setOutsideShowPopover(!shouldClosePopover)
23
+ }
24
+
25
+ const handleOutsideTogglePopover = () => {
26
+ setOutsideShowPopover(!showOutsidePopover)
27
+ }
28
+
29
+ const handleAnyShouldClosePopover = (shouldClosePopover) => {
30
+ setAnyShowPopover(!shouldClosePopover)
31
+ }
32
+
33
+ const handleAnyTogglePopover = () => {
34
+ setAnyShowPopover(!showOutsidePopover)
35
+ }
36
+
37
+ const insidePopoverTrigger = (
38
+ <Button
39
+ dark
40
+ onClick={handleInsideTogglePopover}
41
+ text="Click Inside"
42
+ variant="primary"
43
+ />
44
+ )
45
+
46
+ const outsidePopoverTrigger = (
47
+ <Button
48
+ dark
49
+ onClick={handleOutsideTogglePopover}
50
+ text="Click Outside"
51
+ variant="primary"
52
+ />
53
+ )
54
+
55
+ const anyPopoverTrigger = (
56
+ <Button
57
+ dark
58
+ onClick={handleAnyTogglePopover}
59
+ text="Click Anywhere"
60
+ variant="primary"
61
+ />
62
+ )
63
+
64
+ return (
65
+ <Flex spacing="between">
66
+ <PbReactPopover
67
+ closeOnClick="inside"
68
+ offset
69
+ placement="bottom"
70
+ reference={insidePopoverTrigger}
71
+ shouldClosePopover={handleInsideShouldClosePopover}
72
+ show={showInsidePopover}
73
+ {...props}
74
+ >
75
+ {'Click on me!'}
76
+ </PbReactPopover>
77
+
78
+ <PbReactPopover
79
+ closeOnClick="outside"
80
+ offset
81
+ placement="top"
82
+ reference={outsidePopoverTrigger}
83
+ shouldClosePopover={handleOutsideShouldClosePopover}
84
+ show={showOutsidePopover}
85
+ {...props}
86
+ >
87
+ {'Click anywhere but me!'}
88
+ </PbReactPopover>
89
+
90
+ <PbReactPopover
91
+ closeOnClick="any"
92
+ offset
93
+ placement="right"
94
+ reference={anyPopoverTrigger}
95
+ shouldClosePopover={handleAnyShouldClosePopover}
96
+ show={showAnyPopover}
97
+ {...props}
98
+ >
99
+ {'Click anything!'}
100
+ </PbReactPopover>
101
+ </Flex>
102
+ )
103
+ }
104
+
105
+ export default PopoverCloseDark
@@ -0,0 +1,25 @@
1
+ <%= pb_rails("flex", props: {
2
+ dark: true,
3
+ orientation: "row",
4
+ vertical: "center"
5
+ }) do %>
6
+ <%= pb_rails("body", props: {
7
+ dark: true,
8
+ text: "Click info for more details"
9
+ }) %>
10
+ &nbsp;
11
+ <%= pb_rails("circle_icon_button", props: {
12
+ dark: true,
13
+ variant: "secondary",
14
+ icon: "info",
15
+ id: "regular-popover-5"
16
+ }) %>
17
+ <%= pb_rails("popover", props: {
18
+ trigger_element_id: "regular-popover-5",
19
+ tooltip_id: "tooltip-5",
20
+ offset: true,
21
+ position: "top",
22
+ }) do %>
23
+ I'm a popover. I can show content of any size.
24
+ <% end %>
25
+ <% end %>
@@ -0,0 +1,51 @@
1
+ import React, { useState } from 'react'
2
+ import {
3
+ Body,
4
+ CircleIconButton,
5
+ Flex,
6
+ PbReactPopover,
7
+ } from '../..'
8
+
9
+ const PopoverDark = (props) => {
10
+ const [showPopover, setShowPopover] = useState(false)
11
+
12
+ const handleTogglePopover = () => {
13
+ setShowPopover(!showPopover)
14
+ }
15
+ const popoverReference = (
16
+ <CircleIconButton
17
+ dark
18
+ icon="info"
19
+ onClick={handleTogglePopover}
20
+ variant="secondary"
21
+ />
22
+ )
23
+
24
+ return (
25
+ <Flex
26
+ dark
27
+ orientation="row"
28
+ vertical="center"
29
+ {...props}
30
+ >
31
+ <Body
32
+ dark
33
+ text="Click info for more details"
34
+ {...props}
35
+ />
36
+ &nbsp;
37
+ <PbReactPopover
38
+ dark
39
+ offset
40
+ placement="top"
41
+ reference={popoverReference}
42
+ show={showPopover}
43
+ {...props}
44
+ >
45
+ {'I\'m a popover. I can show content of any size.'}
46
+ </PbReactPopover>
47
+ </Flex>
48
+ )
49
+ }
50
+
51
+ export default PopoverDark
@@ -0,0 +1,13 @@
1
+ <%= pb_rails("button", props: { dark: true, variant: "primary", id: 'list-5' }) do %>
2
+ Filter By
3
+ <%= pb_rails("icon", props: { dark: true, icon: "angle-down"}) %>
4
+ <% end %>
5
+ <%= pb_rails("popover", props: {trigger_element_id: "list-5", tooltip_id: "list-tooltip-5", position: 'bottom', padding: "none"}) do %>
6
+ <%= pb_rails("list", props: {ordered: false, dark: true, borderless: false, xpadding: true}) do %>
7
+ <%= pb_rails("list/item") do %><a>Popularity</a><% end %>
8
+ <%= pb_rails("list/item") do %><a>Title</a><% end %>
9
+ <%= pb_rails("list/item") do %><a>Duration</a><% end %>
10
+ <%= pb_rails("list/item") do %><a>Date Started</a><% end %>
11
+ <%= pb_rails("list/item") do %><a>Date Ended </a><% end %>
12
+ <% end %>
13
+ <% end %>
@@ -0,0 +1,54 @@
1
+ import React, { useState } from 'react'
2
+ import {
3
+ Button,
4
+ Icon,
5
+ List,
6
+ ListItem,
7
+ PbReactPopover,
8
+ } from '../..'
9
+
10
+ const PopoverWithButton = (props) => {
11
+ const [showPopover, setShowPopover] = useState(false)
12
+
13
+ const handleTogglePopover = () => {
14
+ setShowPopover(!showPopover)
15
+ }
16
+
17
+ const popoverReference = (
18
+ <Button
19
+ dark
20
+ onClick={handleTogglePopover}
21
+ variant="primary"
22
+ {...props}
23
+ >
24
+ {'Filter By'}
25
+ <Icon
26
+ dark
27
+ fixedWidth
28
+ icon="angle-down"
29
+ {...props}
30
+ />
31
+ </Button>
32
+ )
33
+
34
+ return (
35
+ <PbReactPopover
36
+ dark
37
+ padding="none"
38
+ placement="bottom"
39
+ reference={popoverReference}
40
+ show={showPopover}
41
+ {...props}
42
+ >
43
+ <List xpadding>
44
+ <ListItem><a>{'Popularity'}</a></ListItem>
45
+ <ListItem><a>{'Title'}</a></ListItem>
46
+ <ListItem><a>{'Duration'}</a></ListItem>
47
+ <ListItem><a>{'Date Started'}</a></ListItem>
48
+ <ListItem><a>{'Date Ended'}</a></ListItem>
49
+ </List>
50
+ </PbReactPopover>
51
+ )
52
+ }
53
+
54
+ export default PopoverWithButton
@@ -0,0 +1,25 @@
1
+ <%= pb_rails("button", props: { dark: true, variant: "primary", id: 'scroll-height-5', text: "Click Me" }) %>
2
+ <%= pb_rails("popover", props: {
3
+ trigger_element_id: "scroll-height-5",
4
+ tooltip_id: "scroll-height-5",
5
+ position: 'top',
6
+ close_on_click: "any",
7
+ max_height: "150px",
8
+ max_width: "240px",
9
+ offset: true
10
+ }) do %>
11
+ <%= pb_rails("body", props: {
12
+ margin_bottom: "sm",
13
+ text: "So many people live within unhappy circumstances and yet will
14
+ not take the initiative to change their situation because they are
15
+ conditioned to a life of security, conformity, and conservation, all of
16
+ which may appear to give one peace of mind, but in reality, nothing is
17
+ more damaging to the adventurous spirit."
18
+ }) %>
19
+ <%= pb_rails("title", props: {
20
+ dark:true,
21
+ size: 4,
22
+ text: "- Christopher McCandless"
23
+ }) %>
24
+ <% end %>
25
+
@@ -0,0 +1,57 @@
1
+ import React, { useState } from 'react'
2
+ import {
3
+ Body,
4
+ Button,
5
+ PbReactPopover,
6
+ Title,
7
+ } from '../..'
8
+
9
+ const PopoverScrollHeightDark = (props) => {
10
+ const [showPopover, setShowPopover] = useState(false)
11
+
12
+ const handleTogglePopover = () => {
13
+ setShowPopover(!showPopover)
14
+ }
15
+
16
+ const handleShouldClosePopover = (shouldClosePopover) => {
17
+ setShowPopover(!shouldClosePopover)
18
+ }
19
+
20
+ const popoverTrigger = (
21
+ <Button
22
+ dark
23
+ onClick={handleTogglePopover}
24
+ text="Click Me"
25
+ variant="primary"
26
+ />
27
+ )
28
+
29
+ return (
30
+ <PbReactPopover
31
+ closeOnClick="any"
32
+ maxHeight="150px"
33
+ maxWidth="240px"
34
+ offset
35
+ placement="top"
36
+ reference={popoverTrigger}
37
+ shouldClosePopover={handleShouldClosePopover}
38
+ show={showPopover}
39
+ {...props}
40
+ >
41
+ <Body
42
+ marginBottom="sm"
43
+ text=" Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."
44
+ {...props}
45
+ />
46
+ <Title
47
+ dark
48
+ size={4}
49
+ text="- Abraham Lincoln"
50
+ {...props}
51
+ />
52
+
53
+ </PbReactPopover>
54
+ )
55
+ }
56
+
57
+ export default PopoverScrollHeightDark
@@ -0,0 +1,14 @@
1
+ <div style="position: relative; z-index: 2">
2
+ <%= pb_rails("body", props: {text: "I've got a z-index of 2", margin_bottom: "md"}) %>
3
+ </div>
4
+ <%= pb_rails("button", props: { variant: "primary", id: 'tooltip-z-index-5', text: "Click Me", }) %>
5
+ <%= pb_rails("popover", props: {
6
+ trigger_element_id: "tooltip-z-index-5",
7
+ tooltip_id: "tooltip-z-index-5",
8
+ position: 'top',
9
+ z_index: "3",
10
+ offset: true
11
+ }) do %>
12
+ I've got a z-index of 3
13
+ <% end %>
14
+
@@ -0,0 +1,54 @@
1
+ import React, { useState } from 'react'
2
+ import {
3
+ Body,
4
+ Button,
5
+ PbReactPopover,
6
+ } from '../..'
7
+
8
+ const PopoverZIndexDark = (props) => {
9
+ const [showPopover, setShowPopover] = useState(false)
10
+
11
+ const handleTogglePopover = () => {
12
+ setShowPopover(!showPopover)
13
+ }
14
+
15
+ const handleShouldClosePopover = (shouldClosePopover) => {
16
+ setShowPopover(!shouldClosePopover)
17
+ }
18
+
19
+ const popoverTrigger = (
20
+ <Button
21
+ dark
22
+ onClick={handleTogglePopover}
23
+ text="Click Me"
24
+ variant="primary"
25
+ />
26
+ )
27
+
28
+ return (
29
+ <>
30
+ <div style={{ position: 'relative', zIndex: 2 }}>
31
+ <Body
32
+ dark
33
+ marginBottom="md"
34
+ text="I've got a z-index of 2"
35
+ {...props}
36
+ />
37
+ </div>
38
+ <PbReactPopover
39
+ closeOnClick="outside"
40
+ offset
41
+ placement="top"
42
+ reference={popoverTrigger}
43
+ shouldClosePopover={handleShouldClosePopover}
44
+ show={showPopover}
45
+ zIndex={3}
46
+ {...props}
47
+ >
48
+ {'I have a custom z-index of 3'}
49
+ </PbReactPopover>
50
+ </>
51
+ )
52
+ }
53
+
54
+ export default PopoverZIndexDark