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,123 @@
1
+ <%= pb_rails("timestamp", props: {
2
+ timestamp: DateTime.now,
3
+ variant: "updated",
4
+ align: "left",
5
+ show_user: true,
6
+ text: "Maricris Nonato"
7
+ }) %>
8
+
9
+ <br>
10
+
11
+ <%= pb_rails("timestamp", props: {
12
+ timestamp: DateTime.now,
13
+ variant: "updated",
14
+ align: "left",
15
+ show_user: false
16
+ }) %>
17
+
18
+ <br>
19
+
20
+ <%= pb_rails("timestamp", props: {
21
+ timestamp: DateTime.now,
22
+ variant: "updated",
23
+ align: "left",
24
+ show_user: true,
25
+ show_timezone: true,
26
+ text: "Maricris Nonato",
27
+ timezone: "America/New_York"
28
+ }) %>
29
+
30
+ <br>
31
+
32
+ <%= pb_rails("timestamp", props: {
33
+ timestamp: DateTime.now,
34
+ variant: "updated",
35
+ align: "left",
36
+ show_user: false,
37
+ show_timezone: true,
38
+ timezone: "America/New_York"
39
+ }) %>
40
+
41
+ <br><br>
42
+
43
+ <%= pb_rails("timestamp", props: {
44
+ timestamp: DateTime.now,
45
+ variant: "updated",
46
+ align: "center",
47
+ show_user: true,
48
+ text: "Maricris Nonato"
49
+ }) %>
50
+
51
+ <br>
52
+
53
+ <%= pb_rails("timestamp", props: {
54
+ timestamp: DateTime.now,
55
+ variant: "updated",
56
+ align: "center",
57
+ show_user: false
58
+ }) %>
59
+
60
+ <br>
61
+
62
+ <%= pb_rails("timestamp", props: {
63
+ timestamp: DateTime.now,
64
+ variant: "updated",
65
+ align: "center",
66
+ show_user: true,
67
+ show_timezone: true,
68
+ text: "Maricris Nonato",
69
+ timezone: "America/New_York"
70
+ }) %>
71
+
72
+ <br>
73
+
74
+ <%= pb_rails("timestamp", props: {
75
+ timestamp: DateTime.now,
76
+ variant: "updated",
77
+ align: "center",
78
+ show_user: false,
79
+ show_timezone: true,
80
+ timezone: "America/New_York"
81
+ }) %>
82
+
83
+ <br><br>
84
+
85
+ <%= pb_rails("timestamp", props: {
86
+ timestamp: DateTime.now,
87
+ variant: "updated",
88
+ align: "right",
89
+ show_user: true,
90
+ text: "Maricris Nonato"
91
+ }) %>
92
+
93
+ <br>
94
+
95
+ <%= pb_rails("timestamp", props: {
96
+ timestamp: DateTime.now,
97
+ variant: "updated",
98
+ align: "right",
99
+ show_user: false
100
+ }) %>
101
+
102
+ <br>
103
+
104
+ <%= pb_rails("timestamp", props: {
105
+ timestamp: DateTime.now,
106
+ variant: "updated",
107
+ align: "right",
108
+ show_user: true,
109
+ show_timezone: true,
110
+ text: "Maricris Nonato",
111
+ timezone: "America/New_York"
112
+ }) %>
113
+
114
+ <br>
115
+
116
+ <%= pb_rails("timestamp", props: {
117
+ timestamp: DateTime.now,
118
+ variant: "updated",
119
+ align: "right",
120
+ show_user: false,
121
+ show_timezone: true,
122
+ timezone: "America/New_York"
123
+ }) %>
@@ -0,0 +1,146 @@
1
+ import React from 'react'
2
+ import Timestamp from '../_timestamp.jsx'
3
+
4
+ const TimestampUpdatedAlign = (props) => {
5
+ return (
6
+ <div>
7
+ <Timestamp
8
+ align="left"
9
+ showUser="true"
10
+ text="Maricris Nonato"
11
+ timestamp={new Date().getTime()}
12
+ variant="updated"
13
+ {...props}
14
+ />
15
+
16
+ <br />
17
+
18
+ <Timestamp
19
+ align="left"
20
+ showUser="false"
21
+ timestamp={new Date().getTime()}
22
+ variant="updated"
23
+ {...props}
24
+ />
25
+
26
+ <br />
27
+
28
+ <Timestamp
29
+ showTimezone="true"
30
+ showUser="true"
31
+ text="Maricris Nonato"
32
+ timestamp={new Date().getTime()}
33
+ timezone="America/New_York"
34
+ variant="updated"
35
+ {...props}
36
+ />
37
+
38
+ <br />
39
+
40
+ <Timestamp
41
+ showTimezone="true"
42
+ showUser="false"
43
+ timestamp={new Date().getTime()}
44
+ timezone="America/New_York"
45
+ variant="updated"
46
+ {...props}
47
+ />
48
+
49
+ <br />
50
+ <br />
51
+
52
+ <Timestamp
53
+ align="center"
54
+ showUser="true"
55
+ text="Maricris Nonato"
56
+ timestamp={new Date().getTime()}
57
+ variant="updated"
58
+ {...props}
59
+ />
60
+
61
+ <br />
62
+
63
+ <Timestamp
64
+ align="center"
65
+ showUser="false"
66
+ timestamp={new Date().getTime()}
67
+ variant="updated"
68
+ {...props}
69
+ />
70
+
71
+ <br />
72
+
73
+ <Timestamp
74
+ align="center"
75
+ showTimezone="true"
76
+ showUser="true"
77
+ text="Maricris Nonato"
78
+ timestamp={new Date().getTime()}
79
+ timezone="America/New_York"
80
+ variant="updated"
81
+ {...props}
82
+ />
83
+
84
+ <br />
85
+
86
+ <Timestamp
87
+ align="center"
88
+ showTimezone="true"
89
+ showUser="false"
90
+ timestamp={new Date().getTime()}
91
+ timezone="America/New_York"
92
+ variant="updated"
93
+ {...props}
94
+ />
95
+
96
+ <br />
97
+ <br />
98
+
99
+ <Timestamp
100
+ align="right"
101
+ showUser="true"
102
+ text="Maricris Nonato"
103
+ timestamp={new Date().getTime()}
104
+ variant="updated"
105
+ {...props}
106
+ />
107
+
108
+ <br />
109
+
110
+ <Timestamp
111
+ align="right"
112
+ showUser="false"
113
+ timestamp={new Date().getTime()}
114
+ variant="updated"
115
+ {...props}
116
+ />
117
+
118
+ <br />
119
+
120
+ <Timestamp
121
+ align="right"
122
+ showTimezone="true"
123
+ showUser="true"
124
+ text="Maricris Nonato"
125
+ timestamp={new Date().getTime()}
126
+ timezone="America/New_York"
127
+ variant="updated"
128
+ {...props}
129
+ />
130
+
131
+ <br />
132
+
133
+ <Timestamp
134
+ align="right"
135
+ showTimezone="true"
136
+ showUser="false"
137
+ timestamp={new Date().getTime()}
138
+ timezone="America/New_York"
139
+ variant="updated"
140
+ {...props}
141
+ />
142
+ </div>
143
+ )
144
+ }
145
+
146
+ export default TimestampUpdatedAlign
@@ -2,14 +2,6 @@ examples:
2
2
 
3
3
  rails:
4
4
  - timestamp_default: Default
5
- - timestamp_align: Alignments
6
- - timestamp_timezones: Timezones
7
- - timestamp_updated: Last Updated by
8
- - timestamp_elapsed: Time Ago
9
5
 
10
6
  react:
11
7
  - timestamp_default: Default
12
- - timestamp_align: Alignments
13
- - timestamp_timezones: Timezones
14
- - timestamp_updated: Last Updated by
15
- - timestamp_elapsed: Time Ago
@@ -1,5 +1 @@
1
1
  export { default as TimestampDefault } from './_timestamp_default.jsx'
2
- export { default as TimestampAlign } from './_timestamp_align.jsx'
3
- export { default as TimestampTimezones } from './_timestamp_timezones.jsx'
4
- export { default as TimestampUpdated } from './_timestamp_updated.jsx'
5
- export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'
@@ -3,96 +3,14 @@
3
3
  module Playbook
4
4
  module PbTimestamp
5
5
  class Timestamp
6
- include ActionView::Helpers::DateHelper
7
6
  include Playbook::Props
8
7
 
9
8
  partial "pb_timestamp/timestamp"
10
9
 
11
10
  prop :text
12
- prop :timestamp
13
-
14
- prop :dark, type: Playbook::Props::Boolean,
15
- default: false
16
- prop :align, type: Playbook::Props::Enum,
17
- values: %w[left center right],
18
- default: "left"
19
- prop :show_date, type: Playbook::Props::Boolean,
20
- default: true
21
- prop :show_timezone, type: Playbook::Props::Boolean,
22
- default: false
23
- prop :show_user, type: Playbook::Props::Boolean,
24
- default: false
25
- prop :timezone, default: "America/New_York"
26
- prop :variant, type: Playbook::Props::Enum,
27
- values: %w[default elapsed updated],
28
- default: "default"
29
11
 
30
12
  def classname
31
- generate_classname("pb_timestamp_kit", variant_class, align)
32
- end
33
-
34
- def caption_text
35
- case variant
36
- when "updated"
37
- format_updated_string
38
- when "elapsed"
39
- format_elapsed_string
40
- else
41
- show_date ? datetime_or_text : format_time_string
42
- end
43
- end
44
-
45
- private
46
-
47
- def format_year_string
48
- pb_date_time.to_year != DateTime.now.year.to_s ? ", #{pb_date_time.to_year}" : ""
49
- end
50
-
51
- def format_time_string
52
- "#{pb_date_time.to_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian} #{format_timezone_string}".strip
53
- end
54
-
55
- def format_timezone_string
56
- timezone && show_timezone ? pb_date_time.to_timezone.to_s : ""
57
- end
58
-
59
- def format_date_string
60
- "#{pb_date_time.to_month_downcase} #{pb_date_time.to_unpadded_day}#{format_year_string}"
61
- end
62
-
63
- def format_datetime_string
64
- "#{format_date_string} &middot; #{format_time_string}".html_safe
65
- end
66
-
67
- def format_updated_string
68
- user_string = show_user ? " by #{text}" : ""
69
- datetime_string = " on #{format_date_string} at #{format_time_string}"
70
-
71
- "Last updated#{user_string}#{datetime_string}"
72
- end
73
-
74
- def format_elapsed_string
75
- user_string = show_user ? " by #{text}" : ""
76
- datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
77
-
78
- "Last updated#{user_string}#{datetime_string}"
79
- end
80
-
81
- def datetime_or_text
82
- timestamp ? format_datetime_string : text
83
- end
84
-
85
- def pb_date_time
86
- Playbook::PbKit::PbDateTime.new(timestamp, timezone)
87
- end
88
-
89
- def variant_class
90
- case variant
91
- when "updated"
92
- "updated"
93
- when "elapsed"
94
- "elapsed"
95
- end
13
+ generate_classname("pb_timestamp_kit")
96
14
  end
97
15
  end
98
16
  end
@@ -23,6 +23,8 @@ const MultiValue = (props: Props) => {
23
23
 
24
24
  if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
25
25
 
26
+ const handleOnClick = removeProps.onClick
27
+
26
28
  return (
27
29
  <components.MultiValueContainer
28
30
  className="text_input_multivalue_container"
@@ -31,14 +33,14 @@ const MultiValue = (props: Props) => {
31
33
  <If condition={imageUrl}>
32
34
  <FormPill
33
35
  avatarUrl={imageUrl}
34
- closeProps={removeProps}
35
36
  marginRight="xs"
36
37
  name={label}
38
+ onClick={handleOnClick}
37
39
  />
38
40
  <Else />
39
41
  <FormPill
40
- closeProps={removeProps}
41
42
  marginRight="xs"
43
+ onClick={handleOnClick}
42
44
  text={label}
43
45
  />
44
46
  </If>
@@ -0,0 +1,21 @@
1
+ <%= pb_rails("user_badge", props: {
2
+ badge: "veteran",
3
+ dark: true,
4
+ size: "sm"
5
+ }) %>
6
+
7
+ <br><br>
8
+
9
+ <%= pb_rails("user_badge", props: {
10
+ badge: "veteran",
11
+ dark: true,
12
+ size: "md"
13
+ }) %>
14
+
15
+ <br><br>
16
+
17
+ <%= pb_rails("user_badge", props: {
18
+ badge: "veteran",
19
+ dark: true,
20
+ size: "lg"
21
+ }) %>
@@ -0,0 +1,36 @@
1
+ import React from 'react'
2
+ import { UserBadge } from '../..'
3
+
4
+ const UserBadgeSizeDark = () => {
5
+ return (
6
+ <div>
7
+ <div>
8
+ <UserBadge
9
+ badge="veteran"
10
+ dark
11
+ size="sm"
12
+ />
13
+ </div>
14
+ <br />
15
+ <br />
16
+ <div>
17
+ <UserBadge
18
+ badge="veteran"
19
+ dark
20
+ size="md"
21
+ />
22
+ </div>
23
+ <br />
24
+ <br />
25
+ <div>
26
+ <UserBadge
27
+ badge="veteran"
28
+ dark
29
+ size="lg"
30
+ />
31
+ </div>
32
+ </div>
33
+ )
34
+ }
35
+
36
+ export default UserBadgeSizeDark